使用说明
Figma MCP电桥
而其他令人惊叹的Figma MCP服务器，如 Figma上下文MCP 存在，一个问题是 API限值 免费用户。
免费帐户的限制是每月6次请求，是的 每月.
Figma MCP桥就是解决这个问题的一种方法。它是一个插件+MCP服务器，可以将实时Figma文档数据流式传输到AI工具，而不会达到Figma API速率限制，因此它为我们其他人提供Figma MCP✊
演示
观看使用Figma MCP Bridge在Cursor中构建UI的演示
快速开始
1.将MCP服务器添加到您最喜欢的AI工具中
将以下内容添加到AI工具的MCP配置中（例如Cursor、Windsurf、Claude Desktop）：
{
"figma-bridge": {
"command": "npx",
"args": ["-y", "@gethopp/figma-mcp-bridge"]
}
}
就是这样——无需下载或安装二进制文件。
2.添加Figma插件
从下载插件 最新版本 页面，然后在Figma中转到 Plugins > Development > Import plugin from manifest 并选择 manifest.json 文件来自 plugin/ 文件夹。
3.开始使用它🎉
打开一个Figma文件，运行插件，并开始提示您的AI工具。MCP服务器将自动连接到插件。
如果你想了解更多关于它是如何工作的，请阅读 运作原理 部分。
本地开发
1.在本地克隆此存储库
git clone git@github.com:gethopp/figma-mcp-bridge.git
2.构建服务器
cd server && npm install && npm run build
3.构建插件
cd plugin && bun install && bun run build
4.将MCP服务器添加到您最喜欢的AI工具中
对于本地开发，请将以下内容添加到AI工具的MCP配置中：
OpenCode（推荐）：
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"figma-bridge": {
"type": "local",
"command": ["node", "/path/to/figma-mcp-bridge/server/dist/index.js"],
"enabled": true
}
}
}
其他AI工具：
{
"figma-bridge": {
"command": "node",
"args": ["/path/to/figma-mcp-bridge/server/dist/index.js"]
}
}
5.过桥
# Start the bridge server
cd /path/to/figma-mcp-bridge/server
node dist/index.js
大桥将：
- 在stdio上启动MCP服务器（用于AI工具通信）
- 在端口1994上启动HTTP服务器（用于插件通信）
- 打印
Leader listening on :1994准备就绪时
验证网桥是否正在运行：
curl http://localhost:1994/ping
# Should return: {"status":"ok","version":"0.1.1"}
6.使用Figma桌面
- 打开Figma桌面
- 打开要分析的Figma文件
- 首选
Plugins > Development并运行“Figma MCP桥” - 插件UI应显示“WebSocket已连接”
- 选择节点或导航到要分析的页面
- 使用AI工具中的MCP工具查询设计
架构概述：
Figma Desktop → Plugin (WebSocket) → Bridge Server (:1994) → MCP Server (stdio) → AI Tool
网桥服务器处理以下之间的协议转换：
- Figma的插件消息协议（通过WebSocket）
- MCP协议（通过stdio）
结构
Figma-MCP-Bridge/
├── plugin/ # Figma plugin (TypeScript/React)
└── server/ # MCP server (TypeScript/Node.js)
└── src/
├── index.ts # Entry point
├── bridge.ts # WebSocket bridge to Figma plugin
├── leader.ts # Leader: HTTP server + bridge
├── follower.ts # Follower: proxies to leader via HTTP
├── node.ts # Dynamic leader/follower role switching
├── election.ts # Leader election & health monitoring
├── tools.ts # MCP tool definitions
└── types.ts # Shared types
运作原理
Figma MCP桥有两个主要组件：
1.Figma插件
Figma插件是Figma MCP网桥的用户界面。您可以在要使用MCP服务器的Figma文件中运行此程序，它负责获取您需要的所有信息。
2.MCP服务器
MCP服务器是Figma MCP网桥的核心。由于Figma插件通过WebSocket连接与MCP服务器连接，MCP服务器负责：
- 从Figma插件处理WebSocket连接
- 将工具调用转发到Figma插件
- 将响应路由回Figma插件
- 处理领导者选举（因为我们一次只能有一个到MCP服务器的WS连接）
可用的MCP工具
连接后，您可以在AI工具中使用这些工具：
| 工具 | 说明 |
|---|---|
get_metadata |
获取文件信息、页面、当前页面 |
get_document |
获取当前页面文档树 |
get_selection |
获取当前选定的节点 |
get_node |
按ID获取特定节点（格式： 123:456) |
get_styles |
获取所有本地样式（绘画、文本、效果、网格） |
get_design_context |
获取选择/页面的摘要树结构 |
get_variable_defs |
获取所有局部变量集合和值 |
get_screenshot |
导出屏幕截图（返回base64） |
save_screenshots |
将屏幕截图导出并保存到文件系统 |
示例用法：
Get the metadata for the current Figma file
Get the design context for the Explore & Discover Crypto frame (node 18319:27856)
Take a screenshot of the selected nodes at 2x scale
故障排除
AI工具中出现“未连接”错误
如果MCP工具返回“未连接”：
-
检查网桥服务器是否正在运行：
curl http://localhost:1994/ping # Should return: {"status":"ok","version":"0.1.1"} -
检查Figma插件是否已连接：
- 看看Figma中的插件UI
- 它应该显示“WebSocket已连接”状态
- 如果没有，请关闭并重新打开插件
-
检查多个桥接过程：
lsof -i :1994 # Kill any stale processes and restart -
重新启动网桥：
# Kill existing process pkill -f "node.*figma-mcp-bridge" # Start fresh cd /path/to/figma-mcp-bridge/server node dist/index.js
RPC请求超时
这通常意味着Figma插件未连接。检查：
- 插件UI显示“WebSocket已连接”
- Figma文件已打开，插件正在运行
插件显示“已连接”，但工具不起作用
到网桥的WebSocket连接可能已过时。尝试：
- 关闭Figma中的插件
- 停止网桥服务器(
pkill -f "node.*figma-mcp-bridge") - 重新启动两者
┌─────────────────────────────────────────────────────────────────────────────┐
│ FIGMA (Browser) │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ Figma Plugin │ │
│ │ (TypeScript/React) │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
│
│ WebSocket
│ (ws://localhost:1994/ws)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ PRIMARY MCP SERVER │
│ (Leader on :1994) │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Bridge Endpoints: │ │
│ │ • Manages WebSocket conn • /ws (plugin) │ │
│ │ • Forwards requests to plugin • /ping (health) │ │
│ │ • Routes responses back • /rpc (followers) │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
▲ ▲
│ HTTP /rpc │ HTTP /rpc
│ POST requests │ POST requests
│ │
┌─────────────────┴───────────┐ ┌─────────────┴───────────────┐
│ FOLLOWER MCP SERVER 1 │ │ FOLLOWER MCP SERVER 2 │
│ │ │ │
│ • Pings leader /ping │ │ • Pings leader /ping │
│ • Forwards tool calls │ │ • Forwards tool calls │
│ via HTTP /rpc │ │ via HTTP /rpc │
│ • If leader dies → │ │ • If leader dies → │
│ attempts takeover │ │ attempts takeover │
└─────────────────────────────┘ └─────────────────────────────┘
▲ ▲
│ │
│ MCP Protocol │ MCP Protocol
│ (stdio) │ (stdio)
▼ ▼
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ AI Tool / IDE 1 │ │ AI Tool / IDE 2 │
│ (e.g., Cursor) │ │ (e.g., Cursor) │
└─────────────────────────────┘ └─────────────────────────────┘
