figma-mcp-go

figma-mcp-go

Figma MCP — 本地插件集成

开源的 Figma MCP 服务，通过 Figma 插件提供完整的读取和写入权限。将文本转化为设计，将设计转化为代码。支持 Claude、Cursor、GitHub Copilot 和任何 MCP 客户端。

亮点

• 通过 Figma Plugin API 在本地运行。无需 REST API 令牌。
• 实时读取和编辑已打开的 Figma 文件——提供 60 个工具。
• 涵盖样式、变量、组件、原型、文本和支持撤销的多步骤批处理。
• 内置提示词，例如 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。AI 工具每个会话会进行数百次快速调用，每次云端往返都会增加延迟。

这个服务会改为连接你自己电脑上的 Figma 插件。无需 API 令牌，即可快速、实时地读取和编辑已打开的文件。

---

设置

使用 npx 或 bunx 安装。无需构建。观看设置视频或按照以下步骤操作。

1. 将服务添加到 AI 工具

Claude Code CLI

# via npx
claude mcp add -s project figma-mcp-go -- npx -y @tunglt1810/figma-mcp-go@latest

# or via bunx
claude mcp add -s project figma-mcp-go -- bunx @tunglt1810/figma-mcp-go@latest

Codex CLI

# via npx
codex mcp add figma-mcp-go -- npx -y @tunglt1810/figma-mcp-go@latest

# or via bunx
codex mcp add figma-mcp-go -- bunx @tunglt1810/figma-mcp-go@latest

.mcp.json（Claude 和其他兼容 MCP 的工具）

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@tunglt1810/figma-mcp-go"]
    }
  }
}

.vscode/mcp.json（Cursor / VS Code / GitHub Copilot）

{
  "servers": {
    "figma-mcp-go": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@tunglt1810/figma-mcp-go"
      ]
    }
  }
}

2. 安装 Figma 插件

1. 在 Figma Desktop 中：插件 → 开发 → 从清单导入插件
2. 从 plugin.zip 中选择 manifest.json
3. 在任意 Figma 文件中运行插件

3. 使用多个 AI 工具（可选）

每个 AI 工具都会启动自己的服务，但同一端口上只能有一个服务持有插件连接。

**同一个文件：**无需更改。第一个服务会占用端口 1994；其他服务会将调用转发给它。如果它停止，另一个服务会在几秒钟内接管。

**不同的文件：**为每个工具指定不同端口，并在相应文件的插件中设置相同的端口（设置齿轮）：

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@tunglt1810/figma-mcp-go", "--port", "1995"]
    }
  }
}

插件会记住所有文件上次使用的端口，因此在其他位置打开插件时，请检查端口设置。

--ip 0.0.0.0 会接受来自其他机器的连接。

**安全性：**插件连接没有登录验证。使用默认地址 127.0.0.1 时，只有你的机器可以访问。在其他任何地址上，能够连接该端口的任何人都可以读取和编辑你打开的文件。服务会发出警告，插件也会启用 confirm 模式。建议使用 SSH 隧道。

4. 只读模式（可选）

添加 --read-only，仅提供 17 个不会更改 Figma 文件的工具。这些工具包括读取工具、export_screenshots、export_frames_to_pdf 和 get_image_bytes。AI 加载的工具列表会缩减约 84%。

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@tunglt1810/figma-mcp-go", "--read-only"]
    }
  }
}

此标志仅限制单个服务。同一端口上的其他 AI 工具仍可编辑文件，除非它们也使用此标志。

插件面板

面板会显示已连接的文件、所选内容以及 AI 正在执行的操作。

控件	功能
Guard	off（默认）会执行所有操作。confirm 会在删除和批量更改前询问。read-only 会阻止所有更改。
Undo	撤销上一次更改。一次完整的 batch_execute_pipeline 运行算作一个撤销步骤。
Log	显示每个请求的工具、时间和错误。Copy 可导出日志，用于提交错误报告。
Pin	保存当前所选内容。即使用户点击其他位置，get_selection(source: "pinned") 仍会返回此内容。

设置和面板大小会按机器保存。面板会跟随 Figma 的浅色和深色主题。

开发模式

set_codegen_result 会将代码保存到节点上。文件中的所有人都可以在开发模式的 Code 面板中查看。组件上的代码会显示在其所有实例中。Language 菜单用于筛选代码块；如果某种语言没有代码块，则会显示所有代码块。

---

工作原理

第一个启动的服务会成为主服务，并持有与插件之间唯一的 WebSocket。其他服务则作为从属服务，将调用转发给主服务。

flowchart LR
    client([MCP client]) -- stdio --> tools
    client2([2nd MCP client]) -- stdio --> follower[Follower]

    subgraph leaderProc [Leader process]
        tools[tools<br/>60 tools, Check] -- Send --> leader[cluster.Leader<br/>:1994 /rpc /ws /ping]
        leader --> bridge[bridge<br/>request/response match]
    end

    follower -. POST /rpc .-> leader

    subgraph plugin [Figma plugin]
        ui[Plugin UI<br/>Svelte iframe] -- postMessage --> main[Plugin main<br/>dispatch handlers]
    end

    bridge == WebSocket ==> ui
    main -- read / write --> figma[(Figma document)]

一次工具调用的完整流程：

sequenceDiagram
    participant C as MCP client
    participant T as tools
    participant L as cluster
    participant B as bridge
    participant U as Plugin UI
    participant M as Plugin main
    participant F as Figma

    C->>T: tools/call (stdio)
    T->>L: Send after Check
    Note over L: A follower first sends POST /rpc to the leader
    L->>B: forward
    B->>U: WebSocket request
    U->>M: postMessage
    M->>F: read / write nodes
    F-->>M: nodes
    M-->>U: response
    U-->>B: WebSocket reply
    B-->>L: matched by id
    L-->>T: (any, error)
    T-->>C: tool result

---

工具

读取

工具	功能
get_document	获取所选内容、页面或整个文件的节点树。默认最多显示 500 个节点；depth、maxNodes、detail、dedupe_components 可控制大小
get_nodes_info	按 ID 获取节点的完整详情。未知 ID 会列在 missing 中；depth 和 maxNodes 用于限制子节点数量
get_selection	获取所选节点，或使用 source: "pinned" 获取已固定的节点
get_metadata	文件名、当前页面和所有页面
search_nodes	在页面、节点或整个文件中按名称和／或类型查找节点
get_viewport	视口中心、缩放比例和可见区域
get_styles	填充、文本、效果和网格样式
get_variable_defs	变量集合、模式和值
get_local_components	所有组件和组件集
get_instance_overrides	实例的组件属性和值
get_annotations	开发模式注释
get_fonts	当前页面上的字体，按使用频率从高到低排列
get_reactions	节点的原型交互

导出

工具	功能
export_screenshots	将节点导出为图片：使用 outputPath 保存到文件，或直接返回（PNG／JPG 以图片形式返回，SVG 以文本形式返回）。未指定项目时，导出所选内容
export_frames_to_pdf	将多个画框保存为一个多页 PDF
get_image_bytes	获取图片填充中原始图片文件的 Base64 数据
export_tokens	将变量和填充样式导出为 JSON 或 CSS
set_export_settings	设置节点的导出预设

创建

工具	功能
create_node	创建 FRAME、RECTANGLE、ELLIPSE、STAR、POLYGON、LINE 或 SECTION
create_text	创建文本节点（会加载字体）
create_vector	根据 SVG 创建矢量图，例如图标
import_image	从 URL 或 Base64 创建图片矩形，或将图片导入节点
create_component	将画框转换为组件
create_component_instance	创建本地组件或库组件的实例
combine_as_variants	将多个组件组合为变体集
manage_component_properties	添加、编辑、删除或绑定组件属性
create_connector	创建连接线。此工具仅适用于 FigJam 文件
boolean_operation	对形状执行 UNION、SUBTRACT、INTERSECT 或 EXCLUDE 操作
flatten_nodes	将多个节点合并为一个矢量图
outline_stroke	将描边转换为填充形状

编辑

工具	功能
set_node_properties	位置、大小、半径、可见性、锁定、不透明度、旋转、混合、约束、图层顺序、蒙版、描边
set_paint	纯色或渐变填充或描边
set_auto_layout	自动布局：方向、内边距、间距、对齐、HUG/FILL 尺寸、最小值/最大值
set_layout_grids	列、行或方形网格
set_effects	阴影、模糊、噪点、纹理、玻璃效果
set_text	文本内容和整个节点的文本设置
set_text_ranges	设置部分文本的样式：粗体、颜色、链接、列表
find_replace_text	查找和替换文本，可使用正则表达式
set_instance_overrides	设置实例的组件属性
swap_component	将实例替换为其他本地或库组件
detach_instance	将实例转换为普通框架
clone_node	复制节点
reparent_nodes	将节点移至另一个父级
group_nodes / ungroup_nodes	分组或取消分组
batch_rename_nodes	按名称、查找/替换、正则表达式、前缀或后缀重命名
set_annotations	Dev Mode 注释（付费席位）
set_reactions	原型交互：设置、追加或移除
delete_nodes	删除节点

样式、变量、页面

工具	功能
create_style	PAINT、TEXT、EFFECT 或 GRID 样式
update_paint_style	重命名或更改绘制样式的颜色
apply_style_to_node	将样式应用到节点
delete_style	删除样式
manage_variable	创建集合、模式和变量；设置值；删除；绑定到节点
manage_page	添加、删除、重命名页面或跳转到页面

工作流

工具	功能
batch_execute_pipeline	在一次调用中运行多个写入步骤，在步骤间传递结果，出错时撤销
set_selection	选中节点并缩放到节点，以便向用户展示
save_version_checkpoint	在进行重大更改前保存一个命名版本
set_codegen_result	为 Dev Mode 的 Code 面板保存代码
manage_plugin_data	在文件中的节点上存储键值备注

提示词

提示词	功能
read_design_strategy	如何有效阅读设计
design_strategy	如何创建和编辑设计
text_replacement_strategy	分块替换设计中的文本
annotation_conversion_strategy	将手动备注转换为 Figma 注释
swap_overrides_instances	在实例间复制覆盖项
reaction_to_connector_strategy	将原型链接转换为流程图

---

升级

更新服务时，请同时更新插件。 npx 会更新服务，但插件需要手动安装。旧版插件会拒绝新命令，并提示 Unknown request type。

请参阅 CHANGELOG.md，了解每个版本的更改，包括已移除的工具及其替代工具。

---

开发

• 服务： Go 1.27+（make test-go、make build-go）
• 插件： Bun 1.4+（cd plugin && bun install && bun run build）
• 所有测试： make test
• 日志： stderr。FIGMA_MCP_LOG=debug 会显示工具参数和流量。
• 包规则： 错误方向的导入会导致 make deps-check 失败。internal/ 包含 bridge（插件 WebSocket）、cluster（领导者选举）、figma（规则）和 tools（工具表）。允许的依赖方向：tools → figma、cluster → bridge。

macOS 二进制文件需要 macOS 13 或更高版本（Go 1.27）。

贡献

欢迎提交问题和 PR。

Star History