内容
# Figma 设计 MCP
允许 AI 助手（如 Claude 等）在 Figma 中直接创建和操作设计。
它通过运行本地 MCP 服务器，在 AI 工具和 Figma 插件之间建立桥梁。插件会轮询服务器以获取命令，并使用 Figma 插件 API 执行这些命令。
## 为什么不使用官方 Figma MCP？
官方 [Figma MCP 服务器](https://www.figma.com/blog/introducing-figma-mcp-server/) 是 **只读** 的 — 它提取设计上下文（布局、变量、组件），以便 AI 可以从现有设计中生成代码。
Figma 设计 MCP 是 **双向** 的。它可以读取设计 *和* 创建设计。您的 AI 助手可以创建框架、添加形状、设置自动布局、应用样式、插入文本、构建组件 — 基本上为您设计。它还可以读取节点属性、导出资产、检查注释和原型反应等。
| | 官方 Figma MCP | Figma 设计 MCP |
|---|---|---|
| 读取设计上下文 | 是 | 是 |
| 创建 / 修改 / 删除节点 | 否 | 是 |
| 导出资产（PNG、SVG、PDF、JPG） | 否 | 是 |
| SVG 导入 | 否 | 是 |
| 开发模式注释 | 否 | 是 |
| 原型反应和交互 | 否 | 是 |
| 本地样式和变量 | 否 | 是 |
| 库组件导入 | 否 | 是 |
| 需要 API 令牌 | 是 | 否（通过插件运行） |
| 设置 | 基于令牌 | 零配置插件 |
由于它通过 Figma 插件 API（而非 REST API）运行，因此无需令牌管理和速率限制 — 只需打开插件即可。
它还极其节省令牌。官方 Figma MCP 通过 REST API 返回完整的深度嵌套设计树，这可能会在每次调用时消耗大量令牌。Figma 设计 MCP 只返回请求的节点的属性，其子节点以轻量级存根（ID、名称、类型）汇总。只有在需要时，您才会深入查看，因此每次调用都保持小且专注。
简而言之：官方 MCP 是 **设计 → 代码**，而这是 **代码 → 设计**（和返回）。
## 设置
### 先决条件
- Node.js 18+
- Figma 桌面应用程序
### 1. 安装依赖项并构建
```sh
git clone https://github.com/nicholasheadway/figma-design-mcp.git
cd figma-design-mcp
npm install
cd server && npm install && cd ..
npm run build
```
### 2. 加载 Figma 插件
1. 打开 Figma 桌面应用程序
2. 进入 **插件 > 开发 > 从清单导入插件...**
3. 从此仓库中选择 `plugin/manifest.json`
### 3. 添加到您的 MCP 客户端
将以下内容添加到您的 Claude Code 配置（`~/.claude/claude_code_config.json`）：
```json
{
"mcpServers": {
"figma-design": {
"command": "node",
"args": ["/absolute/path/to/figma-design-mcp/server/dist/index.js"]
}
}
}
```
或对于 Claude 桌面版（`claude_desktop_config.json`）：
```json
{
"mcpServers": {
"figma-design": {
"command": "node",
"args": ["/absolute/path/to/figma-design-mcp/server/dist/index.js"]
}
}
}
```
### 4. 连接
1. 运行 Figma 插件（插件 > 开发 > 来自 Claude 的设计）
2. 插件将连接到端口 3848 上的本地服务器
3. 开始使用您的 AI 工具 — 现在它可以创建和修改 Figma 设计
## 工具
### 画布操作
| 工具 | 描述 |
|------|-------------|
| `create_nodes` | 创建框架、矩形、文本、椭圆、矢量、组件、实例 |
| `update_nodes` | 更新属性（位置、大小、填充、描边、效果、文本、自动布局） |
| `delete_nodes` | 按 ID 删除节点 |
| `group_nodes` | 将多个节点分组在一起 |
| `ungroup_nodes` | 解组一个组节点 |
| `create_from_svg` | 从 SVG 字符串创建节点 |
### 读取和搜索
| 工具 | 描述 |
|------|-------------|
| `get_node_info` | 获取节点的属性（类型、尺寸、填充、子节点等） |
| `find_nodes` | 按名称和/或类型搜索节点 |
| `get_selection` | 获取当前选中节点的完整节点属性、注释和反应 |
| `get_annotations` | 获取节点的开发模式注释 |
| `get_reactions` | 获取节点的原型交互 |
| `scan_annotations` | 递归查找所有注释/交互节点 |
### 导出和资产
| 工具 | 描述 |
|------|-------------|
| `export_node` | 将节点导出为 PNG、SVG、PDF 或 JPG（保存到磁盘，返回文件路径） |
| `get_styles` | 列出本地绘制、文本、效果和网格样式 |
| `get_variables` | 列出本地变量和变量集合 |
| `list_fonts` | 列出所有可用字体 |
| `import_component` | 按键导入团队库中的组件 |
### 页面
| 工具 | 描述 |
|------|-------------|
| `list_pages` | 列出文件中的所有页面 |
| `set_current_page` | 切换活动页面 |
## 架构
```
AI 工具 A <--stdio--> MCP 服务器 A ---HTTP---> ┐
├─> 桥接守护进程（:3848） <--polling--> Figma 插件
AI 工具 B <--stdio--> MCP 服务器 B ---HTTP---> ┘
```
每个 MCP 客户端（Claude Code、Claude Desktop 等）都会在其自己的 stdio 上启动一个 MCP 服务器。启动时，MCP 服务器会检查端口 3848 上是否有正在运行的 **桥接守护进程**；如果没有，它会以分离的进程自动启动桥接守护进程。工具调用通过 HTTP 转发到桥接守护进程，桥接守护进程会将它们排队等待 Figma 插件执行。
这意味着 **多个代理可以共享一个 Figma 插件连接** — 启动任意多个 MCP 客户端，它们都可以与同一个桥接守护进程通信。来自所有代理的命令都通过一个队列，并按到达顺序执行。
## 开发
```sh
# 服务器的监视模式
cd server && npm run dev
# 在更改后重建插件
npm run build:plugin
```
## 许可证
MIT
