内容
开放式 Figma MCP
开源的 Fig 服务器，通过本地插件桥接实现完全的读写访问 - 无需 REST API，无需速率限制。可与 Claude、Cursorx、GitHub Copilot 和任何 MCP 兼容的 AI 工具配合使用。
<p>
<a href="https://www.npmjs.com/package/open-figma-mcp"><img src="https://.io/open-figma-mcp?color=blue" alt="npm 版本" /></a>
<a href="https://www.npmjs.com/package/open-figma-mcp"><img src="https://img.shields.io/npm/dw/open-figma-mcp?color=green" alt="npm 下载量" /></ <a href="LICENSE"><img src="img.shields.io-MIT-yellow alt="许可证：MITa>
<ahttps://github.com/Hemil4/open-figma-mcp/actions/workflows/publish.yml src="https://img.shields.io/badge/Provenance-signed-brightgreen" alt="Provenance 已签名" /></a>
<a href="https://github.com/Hemil4/open-figma-mcp/stargazers"><img src="https://img.shields.io/github/stars/Hemil4/open-figma-mcp?style=social" alt="GitHub 星标" /></a>
</p>
**亮点**
- 无需 Figma API 令牌
- 无速率限制 - 适用于免费 Figma 计划
- **读取和写入** 实时的 Figma 数据，通过本地插件桥接 - **85 种工具** 总计
- 完整的设计自动化 - 样式、变量、原型、内容、导出
- **屏幕注册表** - 站点地图 → 框架 → 稳定的 `screenKey` 引用，生存于重新布局
---
## 工作原理
```
AI MCP 客户端）
⇅ stdio
MCP 服务器 （Node.js）
⇅ ws://127.0.0.1:18765/ws
Figma 插件（UI iframe ⇄ 沙盒）
⇅
Figma 文件
```
服务器绑定本地 WebSocket 到 `127.0.0.1:18765`。Figma 插件从 Figma Desktop 连接到它。每个工具调用都经过往返：MCP 客户端 → 服务器 → WebSocket插件 → Figma → 返回。
无需 Figma REST API，无需 Figma OAuth，无需托管 MCP。桥接器停留在环回接口上。
---
## 为什么存在
大多数 Figma MCP 服务器都通过 Figma REST API 路由。这会遇到速率限制：
| 计划 | REST 工具调用限制 |
|------|----------------------|
| 免费 / 查看 / 协作 | 约 6 次调用/月 |
| 专业 / 组织（开发席位） | 200 次调用 |
| 企业 | 600 次调用/天 |
几分钟的 AI 实验就可以耗尽这些调用次数。这个项目完全 API，而是通过官方插件 API 与 Figma 通信。插件在您的 Figma Desktop 中本地运行，因此“速率限制”只是您的机器可以处理的程度。
---
## 安装
三个步骤：安装 Figma 插件，配置您的 AI 工具，然后运行它。通过 `npx` 安装 - 无需克隆或构建。
条件：** Node 18+（推荐 Node ），Figma Desktop（不是浏览器应用 - 本地运行）。
### 步骤 1 - 安装 插件
1 [最新版本](https:///Hemil4/open-figma-mcp/releases [**plugin.zip**](githubemil4/open-mcp/releases/latest/download/plugin.zip)。
2 zip 文件解压到任意位置（文件夹必须保留在磁盘上 - Figma 从此位置读取 `manifest.json`）。
3. 打开 Figma Desktop → 任意文件 → **插件 → 开发 → 从清单导入插件… 选择解压的.json`。
5插件现已安装。立即运行它 - 步骤 3 将启动它。
源码安装？在npm install && npm` 后，使用 `</manifest.json` 步骤 配置您的 AI 工具
为您的工具选择代码段。所有四个工具在底层都使用相同的 `npx` 命令。
**Claude Code```bash
mcp add - open-figma -- npx -figma-mcp@latest
```
**Code**
```bash
mcp add open-figma-mcp -- ny open-figma-mcp@latest
```
**`.mcp.json`** （Claude Desktop，其他 MCP 兼容客户端）
```json
{
"mcpServers": {
"open-figma-mcp": {
"command": "npx",
"args":y", "open-figma-mcp@latest"]
}
}
}
```
**`.vscode/mcp.json`** （Cursor，VS Code，GitHub Copilot）
```json
{
"servers": {
"open-figma-mcp": {
"type": "stdio",
"command": "npx",
"args": ["-y", "open-figma-mcp@latest"]
}
}
}
```
<details>
<summary>源码安装（替代）</summary>
```bash
git clone https://github.com/Hemil4/open-figma-mcp.git
cd open-figma-mcp
npm install
npm run build
```
将上述任意代码段中的 `npx` 命令替换为 `<repo>/server/dist/index.js` 的 - 例如：
{
"mcpServers": {
"open-figma-mcp": {
"command": "node",
"args": ["/absolute/path/to/open-figma-mcp/server/dist/index.js"]
}
```
</details>
### 步骤 3 - 运行它
1. 在您的 AI 工具中启动一个会话（Claude/Codex/Cursor/C该工具会自动启动 MCP 服务器。
2. 在 Figma Desktop 中，打开要编辑的文件 → **插件 → 开发 → 打开 Figma MCP**。
3. 插件窗口打开并显示 **已连接**，当 WebSocket 桥接握手成功时。
4. 询问您的 AI ：“列出我的 Figma 页面” - 如果它返回一个列表，则桥接器有效。
就是这样。您要求 AI 创建框架、编辑文本、管理工作变量、导出 - [下面的工具列表](#可用工具) 中的任何内容。
### 验证它是否正常工作
```bash
curl http://127.0.0.1:18765/health
```
当桥接器启动时，返回 `{"ok":true}`。如果 `connection refused`，则没有 MCP 服务器正在运行（在您的 AI 工具中启动一个会话）。
### 常见问题
| 症状 | 解决方法 |
|---------|-----|
| **断开连接** | MCP 服务器未运行。在您的 AI 工具中启动一个会话，然后在插件 UI 中单击 **重新连接**。 |
| `Address already in use` 在端口 18765 上 | 另一个 MCP 会话已经拥有桥接器。新会话自动加入为对等方（自 v0.1.1 起）是可以的，所有客户端共享一个插件。 |
| 想要在上运行 | 客户端配置的 `env` 中设置 `FIGMA_MCP_PORT=<port>`。所有服务器必须使用。 |
| 插件窗口关闭 / 文件切换 | 插件仅在其窗口连接。在新文件中重新运行 **打开 Figma MCP**。 |
### 多客户端（Claude + Codex + Cursor 同时）
自 v0.1.1 起，多个 MCP 客户端可以驱动同一个 Figma 文件第一个** 服务器绑定 `127.0.0.1:187，拥有桥接器；后续服务器加入为方，并通过所有者路由它们的工具调用。在一个插件连接上并行运行它们 - 无需设置。
---
## 屏幕注册工作流
头条工作流：将站点地图转换为框架，然后通过稳定的 `screenKey`脆弱的节点 ID 来驱动 AI 编辑。
// AI调用 figma_create
{
"projectName": "SaaS CRM",
"sectionName": "SaaS CRM Screens",
"screens": [
{ "key": "home", "title": "首页", "route": "/" },
{ "key": " "title": "定价", "route": "/pricing" },
{ "key": "login", "title": "登录", "route": "/login" },
{ "key": "dashboard", "title": "仪表盘", "route": "/dashboard" }
]
}
```
在 Figma 中创建框架，并将注册表写入 `.open-figma-mcp/screen-registry.json`（通过 `FIGMA_MCP_REGISTRY_PATH` 覆盖路径）。
之后，任何创建/修改工具都screenKey`:
```json
{
"screenKeylogin",
"text": "欢迎回来",
"x": 64,
"y": 80,
"fontSize": 32
}
```
当框架移动或更名时，注册表仍然解析该键。
---
## 可用工具
共 85 种工具79 种桥接工具 + 6 种工作流/状态/导出助手。
### 读取 - 文档和选择
| 工具 | 描述 |
|------|-------------|
|ma_get_document` | 文件树（深度 + 详细级别） |
| `figma_get_metadata` | 文件名、页面、当前页面、选择计数 |
| `figma_get_pages` | 页面列表（不加载树） |
| `figma_get_selection` | 当前 |
| `figma` | 按节点 |
|ma_get_nodes_info` |多个节点 |
|ma` | 选择、节点或屏幕的深度限制树（`minimal`/`compactfull`） |
ma_search_nodes 在子树下按类型查找节点 |
figma_scan` | 子树下的 |
| `figma_scan_nodes_by_types` | 匹配给定类型的节点 |
| `figma_get_viewport`视口中心 + 缩放 |
### 样式、变量、库
| 工具 | 描述 |
|------|-------------|
| `figma_get | 本地绘制、文本、效果、网格| `figma_get_variable_defs` | 本地变量集合 + 值 |
| `figma_get_local_components` | 具有变体的组件 + 组件集 |
| `figma_get_annotations` | 插件数据| `figma_get_fonts` | 已使用的字体 + 可选字体 |
| `figma_get_reactions` | 节点上的原型反应 |
| `figma_get_libraries` | 组件、样式、变量、字体、页面、文件元数据 |
| `figma_search_design_system` | 搜索组件/样式/变量/字体/页面 |
### 写入 - 创建
| 工具 | 描述 |
|------|-------------|
| `figma_create_frame` | 创建一个框架，可选自动布局、填充、父级 |
| `figma | 创建一个矩形，可选填充 + 圆角 |
ma_create_ 创建一个椭圆/圆 |
| `figma_create_text` | 创建一个文本节点（自动加载字体） |
| `figma_import_image` | 解码 base64 图像，放置为矩形填充 |
| `figma_create_component` | 将框架转换为可重用组件 |
| `figma_create_section` | 创建一个 Section 节点来组织框架 |
### 修改
| | 描述 |
||
| `fig_text` TEXT 节点内容 |
| `figmaills` | 设置/追加实心填充 |
| `figma_set_strokes` | 设置/追加实心描边 + 权重 |
| `figma_set_opacity` | 设置不透明度 0-1 |
| `figma_set_corner_radius` | 统一或每个角的半径 |
| `figma_set_auto_layout` |方向、填充、间距、对齐 |
ma_set_visible` | 显示 / 隐藏 |
| `figma_lock / `figma_unlock_nodes` | 锁定或解锁 |
| `figma_rotate_nodes` | 绝对旋转角度 |
| `figma_reorder_nodes` | `bringToFront` / `sendToBack` / `bringForward` / `sendBackward`figma_set_blend_mode`IPLY, SCREEN, OVERLAY, … |
| `figma_set_constraints` | 响应式水平 + 垂直约束 |
| `figma_move_nodes` | 移动到绝对 x/y |
| `figma_resize_nodes` | 按宽度/高度调整大小 |
| `figma_rename_node` | 重命名节点 |
| `figma_clone_node` | 克隆，可选重新定位或重新父级 |
| `figma_reparent_nodes` | 移动到新父级下 |
| `fig_rename_nodes` | 通过正则表达式/前缀/后缀/重命名 |
| `figma_find_replace_text` | 在 TEXT 节点上查找 + 替换（支持正则表达式） |
| `figma_set_effects` | 下降阴影 / 模糊效果 |
| `figma_align_distribute齐 +所选/提供的节点 |
| `figma_set_layout_grid`上应用布局网格 |
| `figma_measure_spacing` | 间隙、重叠、 对齐偏差 |
写入 - 删除
| 工具 | 描述-------------|
figma_delete_nodes` | 删除一个或多个### 写入
| 工具 | 描述 |
|------|-------------|
| `figma_create_paint_style` | 创建一个绘制样式 |
| `figma_create_text_style` |文本样式 |
ma_create_effect_style` | 创建一个效果| `figma_create_grid_style` |布局网格样式 |
| `figma_update_paint_style` | 重命名/重新着色现有的绘制样式 |
| `figma_delete_style` | 删除任何本地样式 |
| `figma_apply_style_to_node` | 将样式应用于节点（链接，不是复制） |
| `figma_bind_variable_to_node` | 将变量绑定到节点属性 |
### 写入 - 变量
| 工具 | 描述 |
|------|-------------|
| `figma_create_variable_collection` | 新变量集合 |
| `figma_add_variable_mode` | 向集合中添加模式（例如 Light/Dark） |
| `figma_create_variable` | 创建 COLOR/FLOAT/STRING/BOOLEAN 变量 |
| `figma_set_variable_value` | 为模式设置 |
| `figma_delete_variable` | 删除变量 |
写入 - 页面
| 工具 | 描述 |
|------|-------------|
| `figma_navigate_to_page` | 切换到活动页面 |
| `figma_add_page` | 添加新页面 |
| `figma_delete_page` | 删除页面（不能删除唯一页面） |
| `figma_` | 重命名页面 |
### 写入 - 组件和分组
| 工具 | 描述 |
|------|-------------|
| `figma_group_nodes` | 分组 2+ 节点 |
| `figma_ungroup | 分组 |
| `figma_create_component_set` | 将 2+ 组件组合成组件集 |
| `figma_swap_component` | 交换实例的主组件 |
| `figma_detach_instance` | 将实例分离到普通框架 |
### 型
| 工具 | 描述 |
|------|-------------|
| `figma_set_reactions` | 设置原型反应（替换或追加） |
| `figma_remove_reactions` | 删除节点的所有反应 |
### 导出
| 工具 | 描述 |
|------|-------------|
| `figma_get_screenshot` | 导出节点（s）为 PNG/JPG/SVG/PDF base64 |
| `fig_screenshots` | 导出并将图像文件写入磁盘 |
| `figma_export_frames_to_pdf` | 多框架 PDF 导出，可选写入磁盘 |
| `figma_export_tokens` | 导出本地样式 + 变量为设计令牌 |
### 生成
| 工具 | 描述 |
|------|-------------|
| `figma_generate_diagram` | 创建带有框 + 连接器的结构化图表框架 |
| `figma_generate_screen` | 从 JSON 元素列表创建应用程序屏幕 |
### 工作流和状态
| 工具 | 描述 |
|------|-------------|
| `figma_status` | 桥接状态 + 最后已知的插件状态 |
| `_create_screen_frames` | 站点地图 → 框架 + 持久化屏幕注册表 |
| `figma_get_screen_registry` | 读取屏幕注册表文件 |
| `figma_get_screen` | 按键解析一个屏幕并返回实时节点详细信息 |
---
## 安全
桥接器仅绑定 `127.0.1`。**不要更改主机** 或在公共端口 `` - 桥接器没有身份验证。
插件清单当前使用 `networkAccess.allowedDomains: ["*"]` 来简化。将此存储库视为**开发插件**，而不是 Figma生产强化（缩小允许列表、签名捆绑是正在。
---
## 开发
```bash
npm run build # 构建服务器 + 插件
npm run build:server # 仅 tsc
npm run build:plugin # 仅 esbuild
npm # 通过 tsx 从源代码运行服务器（无插件重建）
npm run start # 直接运行构建的服务器
npm run typecheck # 服务器上的 tsc --noEmit
```
添加工具需要同时编辑两个文件：
1. 在 `server/src/index.ts` 中的 `bridgeTools` 中添加 `ToolSpec`
2. 在 `plugin/src/code.ts` 中的 `handleCommand添加匹配的 `case "<command>":`
3. `npm run build`（两个部分）
忘记任意部分都会在插件端产生未处理的命令错误。
## 贡献
问题和 PR 欢迎。架构图位于 `server/src/index.ts`（桥接线路 + `bridgeTools` 数组）和 `plugin/src/code.ts`（`handleCommand` switch）顶部。添加工具时请保持两者同步。
## 许可证
[MIT](LICENSE) © Hemil Patel
