内容
# figma-remote-mcp-go
Figma MCP，具有远程代理支持 [](https://glama.ai/mcp/servers/ThanhDucPham/figma-remote-mcp-go)
<p>
<a href="https://www.npmjs.com/package/@natsudvn/figma-remote-mcp-go"><img src="https://img.shields.io/npm/v/@natsudvn/figma-remote-mcp-go?color=blue" alt="npm 版本" /></a>
<a href="https://registry.modelcontextprotocol.io/?q=figma-remote-mcp-go"><img src="https://img.shields.io/badge/MCP-Registry-purple" alt="MCP 注册表" /></a>
<a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="许可证：MIT" /></a>
<a href="https://github.com/ThanhDucPham/figma-remote-mcp-go/stargazers"><img src="https://img.shields.io/github/stars/ThanhDucPham/figma-remote-mcp-go?style=social" alt="GitHub 星星" /></a>
</p>
开源 Figma MCP 服务器，通过插件提供完全的读写访问权限 — **支持身份验证令牌的远程代理**，无 REST API，无速率限制。 将文本转换为设计，将设计转换为实际代码。 与 Cursor、Claude、GitHub Copilot 和任何兼容 MCP 的 AI 工具配合使用。
**亮点**
- 无需 Figma API 令牌
- 无速率限制 — 免费计划友好
- **通过插件桥接读取和写入** Figma 实时数据 — 总共 73 种工具
- 完整的设计自动化 — 样式、变量、组件、原型和内容
- 包含设计策略 — `read_design_strategy`、`design_strategy` 和更多内置提示
**样式、变量、组件、原型和内容**
https://github.com/user-attachments/assets/eae41471-fc72-4574-8261-4f42c38b8c99
**文本到设计，设计到代码**
https://github.com/user-attachments/assets/17bda971-0e83-4f18-8758-8ac2b8dcba62
---
## 为什么存在
大多数 Figma MCP 服务器依赖于 **Figma REST API**。
听起来不错……直到你遇到以下情况：
| 计划 | 限制 |
|------|-------|
| Starter / View / Collab | **每月 6 次工具调用** |
| Pro / Org (开发席位) | 每天 200 次工具调用 |
| Enterprise | 每天 600 次工具调用 |
如果你正在尝试使用 AI 工具，你会很快耗尽这些调用。
我当时没有足够的钱来支付更高的限制。
所以我构建了一个 **不使用 API** 的东西。
---
## 安装和设置
通过 `npx` 安装 — 无需构建步骤。观看设置视频或按照以下步骤操作。
[](https://youtu.be/DjqyU0GKv9k)
### 1. 配置您的 AI 工具
根据您希望运行服务器的方式，选择以下两种模式之一：
#### 模式 A：独立模式（IDE 运行 Leader）
如果您不在终端中运行单独的 Leader 服务器，请在不设置 `FIGMA_MCP_LEADER_URL` 的情况下配置它。 IDE 将启动进程，该进程将作为 **Leader** 运行并绑定到端口 `1994`（默认）。然后，您可以直接通过 `127.0.0.1:1994` 将 Figma Desktop 插件连接到该进程。
**Cursor / VS Code (`.vscode/mcp.json`）：**
```json
{
"servers": {
"figma-remote-mcp-go": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@natsudvn/figma-remote-mcp-go"
]
}
}
}
```
**Claude Desktop / 其他 MCP 客户端（`.mcp.json`）：**
```json
{
"mcpServers": {
"figma-remote-mcp-go": {
"command": "npx",
"args": ["-y", "@natsudvn/figma-remote-mcp-go"]
}
}
}
```
#### 模式 B：跟随者模式（单独的 Leader 进程 — 推荐）
如果您在终端中运行单独的 Leader 进程（例如，`npx @natsudvn/figma-remote-mcp-go` 以在 IDE 重新启动时保持 Figma 插件连接），您 **必须** 通过设置 `FIGMA_MCP_LEADER_URL` 环境变量将 IDE 的 MCP 客户端配置为 **跟随者**。这可以防止端口 `1994` 上的端口冲突。
**Cursor / VS Code (`.vscode/mcp.json`）：**
```json
{
"servers": {
"figma-remote-mcp-go": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@natsudvn/figma-remote-mcp-go"
],
"env": {
"FIGMA_MCP_LEADER_URL": "http://127.0.0.1:1994"
}
}
}
}
```
**Claude Desktop / 其他 MCP 客户端（`.mcp.json`）：**
```json
{
"mcpServers": {
"figma-remote-mcp-go": {
"command": "npx",
"args": ["-y", "@natsudvn/figma-remote-mcp-go"],
"env": {
"FIGMA_MCP_LEADER_URL": "http://127.0.0.1:1994"
}
}
}
}
```
**Claude Code CLI：**
```bash
claude mcp add -s project figma-remote-mcp-go -- npx -y @natsudvn/figma-remote-mcp-go@latest
# 注意：编辑 ~/.claude/mcp_servers.json 以在跟随者模式下添加 FIGMA_MCP_LEADER_URL
```
**Codex CLI：**
```bash
codex mcp add figma-remote-mcp-go -- npx -y @natsudvn/figma-remote-mcp-go@latest
```
### 2. 安装 Figma 插件
1. 在 Figma Desktop 中：**插件 → 开发 → 从清单导入插件**
2. 从 [plugin.zip](https://github.com/ThanhDucPham/figma-remote-mcp-go/releases) 中选择 `manifest.json`
3. 在任意 Figma 文件中运行插件
---
## 可用工具
### 写 — 创建
| 工具 | 描述 |
|------|-------------|
| `create_frame` | 创建一个框架，可选自动布局、填充和父级 |
| `create_rectangle` | 创建一个矩形，可选填充和圆角半径 |
| `create_ellipse` | 创建一个椭圆或圆 |
| `create_text` | 创建一个文本节点（自动加载字体） |
| `import_image` | 解码 base64 图像并将其作为矩形填充 |
| `create_component` | 将现有的 FRAME 节点转换为可重用组件 |
| `create_section` | 创建一个 Figma 部分节点来组织页面上的框架 |
### 写 — 修改
| 工具 | 描述 |
|------|-------------|
| `set_text` | 更新现有 TEXT 节点的文本内容 |
| `set_fills` | 在节点上设置实心填充颜色（十六进制） |
| `set_strokes` | 在节点上设置实心描边颜色和权重 |
| `set_opacity` | 设置一个或多个节点的透明度（0 = 透明，1 = 不透明） |
| `set_corner_radius` | 设置圆角半径 — 统一或每个角 |
| `set_auto_layout` | 在框架上设置或更新自动布局（弹性）属性 |
| `set_visible` | 显示或隐藏一个或多个节点 |
| `lock_nodes` | 锁定一个或多个节点以防止意外编辑 |
| `unlock_nodes` | 解锁一个或多个节点 |
| `rotate_nodes` | 在一个或多个节点上设置绝对旋转角度 |
| `reorder_nodes` | 更改 z 顺序：`bringToFront`、`sendToBack`、`bringForward`、`sendBackward` |
| `set_blend_mode` | 在一个或多个节点上设置混合模式（MULTIPLY、SCREEN、OVERLAY、…） |
| `set_constraints` | 在一个或多个节点上设置响应式约束 `{ horizontal, vertical }` |
| `move_nodes` | 将节点移动到绝对的 x/y 位置 |
| `resize_nodes` | 通过宽度和/或高度调整节点大小 |
| `rename_node` | 重命名节点 |
| `clone_node` | 克隆节点，可选重新定位或重新父节点 |
| `reparent_nodes` | 将节点移动到不同的父框架、组或部分 |
| `batch_rename_nodes` | 通过查找/替换、正则表达式或前缀/后缀批量重命名节点 |
| `find_replace_text` | 在子树或页面中的所有 TEXT 节点中查找和替换文本；支持正则表达式 |
### 写 — 删除
| 工具 | 描述 |
|------|-------------|
| `delete_nodes` | 永久删除一个或多个节点 |
### 写 — 原型
| 工具 | 描述 |
|------|-------------|
| `set_reactions` | 在节点上设置原型反应（触发器 + 操作）；模式 `replace` 或 `append` |
| `remove_reactions` | 删除节点上所有或特定的反应， 按零基索引 |
### 写 — 样式
| 工具 | 描述 |
|------|-------------|
| `set_effects` | 直接在节点上应用投影/模糊效果（无需样式） |
| `create_paint_style` | 创建具有实心颜色的命名画笔样式 |
| `create_text_style` | 创建具有字体、大小和间距的命名文本样式 |
| `create_effect_style` | 创建命名效果样式（投影、内投影、模糊） |
| `create_grid_style` | 创建命名网格样式（列、行或网格） |
| `update_paint_style` | 重命名或重新着色现有的画笔样式 |
| `apply_style_to_node` | 将现有的本地样式应用于节点，将其链接到该样式 |
| `delete_style` | 删除任何样式（画笔、文本、效果或网格），按 ID |
### 写 — 变量
| 工具 | 描述 |
|------|-------------|
| `create_variable_collection` | 创建一个新的本地变量集合，带有可选的初始模式 |
| `add_variable_mode` | 向现有集合添加新的模式（例如 Light/Dark） |
| `create_variable` | 在集合中创建变量（COLOR/FLOAT/STRING/BOOLEAN） |
| `set_variable_value` | 为特定模式设置变量的值 |
| `bind_variable_to_node` | 将变量绑定到节点属性 — 支持 `fillColor`、`strokeColor`、`visible`、`opacity`、`rotation`、`width`、`height`、圆角半径、间距等 |
| `delete_variable` | 删除变量或整个集合 |
### 写 — 页面
| 工具 | 描述 |
|------|-------------|
| `add_page` | 添加新页面到文档（可选名称和索引） |
| `delete_page` | 删除页面， 按 ID 或名称（不能删除唯一页面） |
| `rename_page` | 重命名页面， 按 ID 或当前名称 |
### 写 — 组件和导航
| 工具 | 描述 |
|------|-------------|
| `navigate_to_page` | 通过 ID 或名称切换到活动 Figma 页面 |
| `group_nodes` | 将两个或多个节点分组到一个 GROUP 中 |
| `ungroup_nodes` | 解组 GROUP 节点，将子节点移动到父节点 |
| `swap_component` | 交换 INSTANCE 节点的 主组件 |
| `detach_instance` | 取消实例化组件，将它们转换为普通框架 |
### 读取 — 文档和选择
| 工具 | 描述 |
|------|-------------|
| `get_document` | 当前页面的完整树结构 |
| `get_metadata` | 文件名、页面、当前页面 |
| `get_pages` | 所有页面（ID + 名称）— 轻量级，无需加载树结构 |
| `get_selection` | 当前选定的节点 |
| `get_node` | 通过 ID 获取单个节点 |
| `get_nodes_info` | 通过 ID 获取多个节点 |
| `get_design_context` | 具有 `detail` 级别（`minimal`/`compact`/`full`）的深度限制树结构 |
| `search_nodes` | 在子树中按名称子字符串和/或类型查找节点 |
| `scan_text_nodes` | 子树中的所有文本节点 |
| `scan_nodes_by_types` | 匹配给定类型列表的节点 |
| `get_viewport` | 当前视口中心、缩放比例和可见边界 |
### 读取 — 样式和变量
| 工具 | 描述 |
|------|-------------|
| `get_styles` | 画笔、文本、效果和网格样式 |
| `get_variable_defs` | 变量集合和值 |
| `get_local_components` | 所有组件 + 具有变体属性的组件集 |
| `get_annotations` | 开发模式注释 |
| `get_fonts` | 当前页面上使用的所有字体，按频率排序 |
| `get_reactions` | 节点上的原型/交互反应 |
### 导出
| 工具 | 描述 |
|------|-------------|
| `get_screenshot` | 任意节点的 Base64 图像导出 |
| `save_screenshots` | 导出图像到磁盘（服务器端，无 API 调用） |
| `export_frames_to_pdf` | 导出多个框架为单个多页面 PDF 文件，保存到磁盘 |
| `export_tokens` | 将设计令牌（变量 + 画笔样式）导出为 JSON 或 CSS |
### MCP 提示
| 提示 | 描述 |
|--------|-------------|
| `read_design_strategy` | 读取 Figma 设计的最佳实践 |
| `design_strategy` | 创建和修改设计的最佳实践 |
| `text_replacement_strategy` | 在设计中替换文本的分段方法 |
| `annotation_conversion_strategy` | 将手动注释转换为原生 Figma 注释 |
| `swap_overrides_instances` | 在组件实例之间传输重写 |
| `reaction_to_connector_strategy` | 将原型反应映射到交互流程图 |
---
## 相关项目
- [magic-spells/figma-mcp-bridge](https://github.com/magic-spells/figma-mcp-bridge)
- [grab/cursor-talk-to-figma-mcp](https://github.com/grab/cursor-talk-to-figma-mcp)
- [gethopp/figma-mcp-bridge](https://github.com/gethopp/figma-mcp-bridge)
---
## 贡献
欢迎提出问题和拉取请求。
## 星级历史
<a href="https://www.star-history.com/?repos=ThanhDucPham%2Ffigma-remote-mcp-go&type=date&legend=top-left">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=ThanhDucPham/figma-remote-mcp-go&type=date&theme=dark&legend=top-left" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=ThanhDucPham/figma-remote-mcp-go&type=date&legend=top-left" />
<img alt="星级历史图表" src="https://api.star-history.com/chart?repos=ThanhDucPham/figma-remote-mcp-go&type=date&legend=top-left" />
</picture>
</a>
