Figma MCP Bridge

Pairing with Hopp

虽然已经存在其他出色的 Figma MCP 服务器，例如 Figma-Context-MCP，但一个问题是免费用户的 API 限制。

免费账户的限制是每月 6 次请求，没错，是每月。

Figma MCP Bridge 是解决此问题的方案。它是一个插件 + MCP 服务器，可以将实时 Figma 文档数据流式传输到 AI 工具，而不会触及 Figma API 的速率限制，因此它是属于我们普通人的 Figma MCP ✊

演示

观看在 Cursor 中使用 Figma MCP Bridge 构建 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 并选择 plugin/ 文件夹中的 manifest.json 文件。

3. 开始使用 🎉

打开一个 Figma 文件，运行插件，然后开始向您的 AI 工具提问。MCP 服务器将自动连接到插件。

如果您想了解更多关于它的工作原理，请阅读工作原理部分。

可用工具

工具	描述
`get_document`	获取当前 Figma 页面文档树
`get_selection`	获取 Figma 中当前选中的节点
`get_node`	通过 ID 获取特定的 Figma 节点（冒号格式，例如 `4029:12345`）
`get_styles`	获取所有本地填充、文本、效果和网格样式
`get_metadata`	获取文件名、页面和当前页面信息
`get_design_context`	获取针对理解设计上下文优化的深度受限树
`get_variable_defs`	获取所有变量集合、模式和值（设计令牌）
`get_screenshot`	将节点导出为 PNG/SVG/JPG/PDF（base64 编码）
`save_screenshots`	直接将截图导出并保存到本地文件系统

本地开发

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 配置中：

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

结构

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 Bridge 有两个主要组件：

1. Figma 插件

Figma 插件是 Figma MCP Bridge 的用户界面。您可以在想要使用 MCP 服务器的 Figma 文件中运行它，它负责为您获取所需的所有信息。

2. MCP 服务器

MCP 服务器是 Figma MCP Bridge 的核心。当 Figma 插件通过 WebSocket 连接与 MCP 服务器连接时，MCP 服务器负责：

处理来自 Figma 插件的 WebSocket 连接
将工具调用转发给 Figma 插件
将响应路由回 Figma 插件
处理领导者选举（因为我们一次只能有一个到 MCP 服务器的 WS 连接）

┌─────────────────────────────────────────────────────────────────────────────┐
│                              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)         │
         └─────────────────────────────┘    └─────────────────────────────┘

Figma MCP Bridge

Figma MCP Bridge

演示

快速开始

1. 将 MCP 服务器添加到您喜爱的 AI 工具中

2. 添加 Figma 插件

3. 开始使用 🎉

可用工具

本地开发

1. 在本地克隆此仓库

2. 构建服务器

3. 构建插件

4. 将 MCP 服务器添加到您喜爱的 AI 工具中

结构

工作原理

1. Figma 插件

2. MCP 服务器

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API