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 成功出口后。*

1. 开始 MCP服务器 并在IDE中配置它。
2. 询问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服务器并测试工具。