AI导哈

Figma设计数据桥接工具

通过MCP服务器实现AI代理访问Figma设计数据的桥接工具，适用于设计协作与自动化场景

  • by bakuryukhanh
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 bakuryukhanh/figma-plugin-mcp

使用说明

MCP网桥的Figma插件

该项目使AI代理（通过MCP）能够从Figma访问设计信息。

建筑

  1. Figma插件：从Figma中提取设计数据，并将其发送到本地服务器。
  2. 本地服务器：将设计数据（暂时）存储在内存中，以便在Figma的沙盒之外访问。
  3. MCP服务器：查询本地服务器（而不是直接查询Figma API）以避免速率限制并提供对导出设计的快速访问。

设置

1.本地服务器

保存数据的桥梁。

cd local-server
npm install
npm start

继续运行 http://localhost:3000.

2.Figma插件

出口商。

cd figma-plugin
npm install
npm run build
  1. 打开Figma桌面应用程序。
  2. 首选 插件 -> 发展 -> 从清单导入插件。..
  3. 选择 figma-plugin/manifest.json.
  4. 在文件中运行插件，选择一个节点，然后单击 出口.

3.MCP服务器

AI代理的接口。

cd mcp-server
npm install
npm run build

添加到您的MCP客户端配置中（例如。， claude_desktop_config.json):

{
  "mcpServers": {
    "figma-bridge": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-server/dist/index.js"]
    }
  }
}

可用的MCP工具

  • get_figma_design：检索特定节点的设计数据
    • fileKey：Figma文件标识符
    • nodeId：Figma节点标识符
  • list_figma_designs：列出当前存储在本地服务器中的所有设计

使用流程

  1. 开始 本地服务器 (cd local-server && npm start).
  2. 打开Figma，选择一个框架/组件。
  3. 跑吧 Figma插件 然后单击“导出”。
    • 注意：插件UI将显示 fileKey 和 nodeId 成功出口后。
  4. 开始 MCP服务器 并在IDE中配置它。
  5. 询问Claude（或您的MCP代理）：“列出可用的Figma设计”或“获取文件[key]和节点[id]的设计”。

测试

本地服务器测试

测试可在 local-server/__tests__/server.test.ts.运行：

cd local-server
npm test

MCP服务器测试

MCP服务器可以通过与MCP客户端（如Claude Desktop）集成并调用工具进行测试。

手动测试

  1. 启动本地服务器
  2. 从Figma插件导出设计
  3. 卷曲测试：
# Check health
curl http://localhost:3000/health

# List designs
curl http://localhost:3000/designs

# Get specific design
curl http://localhost:3000/designs/test-file/1:1
  1. 在IDE中配置MCP服务器并测试工具。

相关 MCP