mcpField
F
figma-edit-mcp

figma-edit-mcp

本地服务
github.com/neozhehan媒体与设计1412 周前更新
代码仓库

关于 figma-edit-mcp

figma-edit-mcp 通过 MCP 让 AI 助手读取、创建和修改 Figma 设计。Figma 插件会将编辑限制在所选区域，并拒绝不符合安全规则的操作。

主要功能

  1. 01读取和检查页面及节点
  2. 02创建形状、画框、文本和组件
  3. 03变换、设置样式及整理节点
  4. 04执行前验证编辑操作
  5. 05将更改限制在所选页面或画框

适用场景

  1. 01批量替换多个图层中的文本
  2. 02批量更新组件实例
  3. 03调整所选画框的布局和样式

MCP 相关

它通过与 Figma 插件相连的 WebSocket 桥接，将 Figma 读取和编辑工具提供给 MCP 客户端。还通过 MCP 资源提供操作指南。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "neozhehan-figma-edit": {
      "command": "npx",
      "args": [
        "-y",
        "figma-edit-mcp"
      ]
    }
  }
}
启动命令npx -y figma-edit-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmfigma-edit-mcp2.3.3

工具

45

收录的工具列表 · 更新于 2 周前

参数类型必填说明
pageIdsarray否要检查的页面 ID 数组

详细介绍

Figma Edit MCP

npm version npm downloads CI Featured by IDEO

figma-edit-mcp MCP server

通过模型上下文协议将 AI 助手连接到 Figma，以便以编程方式读取设计、创建和修改元素，以及管理设计系统。

这个插件让你的 AI 助手成为 Figma 助手，执行设计更新，比人类以往所能做到的更安全、更整洁、更快速。

这个插件让你作为设计师能够专注于创意决策，将容易出错且重复的手动修改交给自动化系统。

🏆 由 IDEO 推荐： 让 AI 在无需信任其行为的情况下编辑实时 Figma 文件

📖 文档： neozhehan.github.io/figma-edit-mcp

它能为你做什么

本项目有三个目标：更安全、更整洁、更快速。

  • 🛡️ 更安全： 插件会在 AI 请求的每项操作运行前进行检查。如果某项操作会损坏文件，插件就会拒绝执行，并告诉 AI 原因。例如，如果某个颜色变量仍被图层使用，插件就不会删除它。删除正在使用的变量时，Figma 本身不会发出警告；删除后会留下很难查找的损坏引用。
  • ✨ 更整洁： 由于会拒绝可能造成损坏的操作，文件不会积累损坏的引用或遗留值。批量更新会覆盖所有符合请求的图层，而不只是某人记得检查的图层。
  • ⚡ 更快速： AI 可以在几秒内将一项更改应用到数百个图层。例如，它可以替换页面上每个文本图层中的产品名称，或将一个组件实例的覆盖属性复制到另外五十个实例。

这些目标相辅相成：插件拒绝错误操作后，文件便能保持一致；一致的文件也更便于你和 AI 使用。

阅读关于这些目标的完整理念 →

AI 无法对你的文件做什么

AI 助手有时会凭空编造内容。AI 可能会说出一个并不存在的图层名称，也可能记错自己正在编辑哪个图层。此插件不依赖 AI 做出正确判断。插件会在 Figma 内自行检查每次编辑，并拒绝任何未通过检查的编辑。AI 无法跳过这些检查。

插件会强制执行以下规则：

  1. AI 只能编辑你选定的区域。 连接时，你可以为本次会话选择一个页面或一个画框。插件会拒绝在该区域之外进行的任何编辑。如果你没有选择区域，AI 可以读取文件，但无法编辑任何图层。
  2. 每次编辑都必须指定确切的目标图层。 插件会将 AI 提供的图层名称与实际图层名称进行比对。如果名称不匹配，插件就会拒绝此次编辑。这样可以防止 AI 编辑凭空编造或记错的图层。
  3. 批量编辑中只要有一项不合规，任何内容都不会更改。 插件会在更改第一项之前验证批量编辑中的每一项。如果任何一项未通过验证，插件就会拒绝整个批量编辑。
  4. 受保护的图层会继续受到保护。 插件会拒绝编辑锁定的图层和来自共享库的资源。它还会拒绝在组件实例内部添加、删除或移动图层。
  5. AI 无法删除自己的工作区域。 插件会拒绝任何会删除或替换你为本次会话指定的页面或画框的操作。
  6. 变量和样式需要单独授权。 编辑你的变量或样式需要在插件中单独勾选相应复选框，且默认情况下两个复选框都处于关闭状态。此权限由你授予；AI 无法自行授予。

有一项限制需要如实说明：插件会检查编辑发生在哪里以及修改了哪个图层。它无法检查此次编辑是否符合你的意愿。只要错误的编辑遵守了所有规则，它就会执行。因此，你需要像检查同事的工作一样检查 AI 的工作。

具体规则及其适用条件都记录在 SAFETY.md 中。该文档面向开发者。(你的 AI 助手会在运行时通过 figma-edit 技能或 figma-edit://guide/* 资源加载同一套规则。)

工作如何分工

你无需了解 Figma 的所有功能，也能指挥这个系统。工作分为三部分：

  • 你决定设计应该是什么样子。你用日常语言描述要进行的更改，并判断结果是否合适。你无需了解要使用哪个 Figma 菜单或面板来执行更改。
  • AI 助手会将你的请求转化为具体的 Figma 操作，并在多个图层中完成重复性工作。
  • 插件在 Figma 内运行，检查每项操作，并拒绝不安全的操作。

AI 提供规模化能力。插件提供保护。你提供设计判断。

支持的 AI 集成

  • Cursor
  • GitHub Copilot (VS Code)
  • Google Antigravity
  • Claude Code (VS Code & CLI)
  • Claude Desktop (Chat, Cowork & Code)
  • LM Studio

快速开始

运行 Figma Edit MCP 最快捷的方式是直接从 NPM registry 启动。你无需克隆此仓库。

1. 配置 AI 助手

将服务添加到 AI 助手的 MCP 配置中：

{
  "mcpServers": {
    "FigmaEdit": {
      "command": "npx",
      "args": ["-y", "figma-edit-mcp"]
    }
  }
}

配置文件的位置取决于你使用的宿主端，详见下文的特定集成的配置。Bun 用户可以用 bunx 替代 npx；两者解析到同一个软件包。

2. 启动 WebSocket bridge

在终端中启动连接 MCP 服务与 Figma 插件的 bridge。保持此终端运行：

npx -y --package figma-edit-mcp figma-edit-mcp-socket
3. 安装 Figma 插件

Figma 插件包含在 NPM 包中。安装一次该包，即可将插件文件写入磁盘：

# In any directory of your choosing (e.g., ~/figma-edit-mcp/)
npm install figma-edit-mcp

然后在 Figma 桌面应用中：

  1. 打开 Plugins → Development → Import plugin from manifest…
  2. 从上面的目录中选择 node_modules/figma-edit-mcp/figma_plugin/manifest.json。

现在，在任何 Figma 文件中，都可以通过 Plugins → Development 使用该插件。

4.（可选）安装 Agent 技能

该软件包还附带一个跨工具 技能，用于向 Agent 说明服务的安全限制、错误恢复和工具选择方式。技能按需加载，因此在需要之前几乎不产生任何开销。支持开放的 SKILL.md 标准的 Agent（Claude Code、GitHub Copilot、OpenAI Codex、Cursor、Gemini CLI、Google Antigravity）会在技能位于其技能目录中时自动发现它：

# copy the skill into your agent's skills directory (path varies by host)
cp -R node_modules/figma-edit-mcp/skills/figma-edit ~/.claude/skills/

不支持技能的客户端仍可通过 MCP 连接，从 figma-edit://guide/* 下的资源获取相同的指南——无需安装。

如果从本地克隆运行，请参阅 CONTRIBUTING.md，了解仅供贡献者使用的 --local 开发工作流。

特定集成的设置

将快速入门中的 JSON 代码片段粘贴到主机的 MCP 配置文件中：

集成配置文件位置说明
Cursor~/.cursor/mcp.json编辑后重启 Cursor
VS Code / GitHub Copilot~/Library/Application Support/Code/User/mcp.json需要 VS Code 1.102+ 和 Copilot；启用 Agent Mode
Google Antigravity~/.gemini/antigravity/mcp_config.json重启 Antigravity 以加载
Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json—
Claude Code（CLI / VS Code）运行 claude mcp add FigmaEdit npx figma-edit-mcp无需编辑文件
LM Studio通过 Developer 选项卡编辑 mcp.json如果提供了深层链接，也可以使用

手动配置

如果希望直接编辑主机的 MCP 配置，请将此代码片段粘贴到相应的配置文件中：

{
  "mcpServers": {
    "FigmaEdit": {
      "command": "npx",
      "args": ["-y", "figma-edit-mcp"]
    }
  }
}
集成配置文件位置
Cursor~/.cursor/mcp.json
VS Code / Copilot~/Library/Application Support/Code/User/mcp.json
Antigravity~/.gemini/antigravity/mcp_config.json
Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json
LM Studio使用应用内编辑器（通过 Developer 选项卡），或编辑 mcp.json

如果从本地克隆运行，请参阅 CONTRIBUTING.md，了解 --local 工作流。

贡献

有关本地开发——从源代码构建、从克隆目录运行桥接程序，以及 --local 集成工作流——请参阅 CONTRIBUTING.md。

Windows + WSL 指南

若要让 Figma（在 Windows 上运行）连接到桥接程序（在 WSL 中运行），桥接程序需要监听 0.0.0.0，而不是 localhost：

npx -y --package figma-edit-mcp figma-edit-mcp-socket --host 0.0.0.0
# or via environment variable:
FIGMA_EDIT_MCP_SOCKET_HOST=0.0.0.0 npx -y --package figma-edit-mcp figma-edit-mcp-socket

然后将 Figma 插件的 WebSocket 地址指向 WSL 实例的 IP。

用法

  1. 启动 WebSocket 桥接程序：npx -y --package figma-edit-mcp figma-edit-mcp-socket
  2. 在 AI 助手中配置 MCP 服务（参见特定集成的设置）
  3. 打开 Figma，并从 Plugins → Development 启动 Figma Edit MCP 插件
  4. 使用 channel_join MCP 工具建立通信
  5. 使用 AI 助手通过可用的 MCP 工具与 Figma 交互

MCP 工具

工具按两级、以下划线分隔的命名空间（group_action）分组。读取操作使用 *_list / *_info；写入操作使用动词作为末级名称。任何会修改节点的操作都属于 node_*。

page — 页面
工具描述
page_info列出文档中的页面；指定 pageIds 时，返回这些页面及其顶层子项
node — 读取、转换和设置任意节点的样式
工具描述
node_info读取一个或多个节点——支持递归遍历，并可使用 properties、filter 和 maxDepth（核心读取工具；也会返回绑定变量／显式模式）
node_transform通过设置绝对 x／y／width／height 值来移动和／或调整节点大小
node_rename重命名节点
node_delete在单个经过验证的批次中删除一个或多个节点
node_clone复制节点，可选择指定新位置
view_navigate将编辑器视图导航到页面或节点
node_group将节点组合到新的组中
node_ungroup解散一个组，并将其子节点提升到上层
node_flatten将节点及其子节点扁平化为单个矢量
node_insert_child将节点重新设为新父节点的子节点，可选择指定索引
node_set_auto_layout配置框架的自动布局（模式、内边距、间距、对齐、尺寸）
node_set_fill将节点填充设为颜色或图像，或清除填充
node_set_stroke设置描边颜色和粗细（统一设置或逐边设置）
node_set_corner_radius设置圆角半径（统一设置或逐角设置）
node_set_effects设置效果数组（阴影、模糊）
node_apply_style将节点关联到共享库样式（绘制／文本／效果／网格）
node_bind_variable将变量绑定到节点属性，或设置显式变量模式
node_export_visual将节点渲染为图像（PNG / JPG / SVG / PDF）
create — 创建新节点
工具描述
create_shape创建矩形、椭圆、多边形或星形（type），可选择添加填充／描边
create_frame创建框架，可选择添加填充／描边并配置完整的自动布局
create_text创建文本节点，可选择设置字体大小／粗细／颜色
create_svg根据 SVG 标记字符串创建节点
create_component将现有框架转换为主组件
create_instance在指定位置实例化一个组件
create_component_set将多个组件合并为组件集（变体）
style — 共享样式
工具描述
style_list列出所有本地样式（绘制／文本／效果／网格）
style_manage创建命名样式；若提供 styleId，则更新该样式
style_delete按 ID 删除本地样式（解除与使用方的关联，但使用方会保留解析后的值）
text — 文本内容与排版
工具描述
text_set_content批量设置一个或多个文本节点的文本
text_set_style设置文本节点的任意组合排版属性
component — 组件与变体
工具描述
component_list列出组件，并支持筛选和范围选项
component_manage_property添加或编辑组件属性定义（BOOLEAN/TEXT/INSTANCE_SWAP）
component_delete_property移除组件属性定义
instance — 组件实例
工具描述
instance_set_property设置实例的一个属性（切换、文本、替换或变体）
instance_get_overrides读取源实例的覆盖属性
instance_set_overrides将复制的覆盖属性应用到目标实例
variable — 变量与集合
工具描述
variable_list列出变量／集合，或按 ID 查看详情；可选择扫描使用方
variable_manage创建集合和变量，并设置值／别名
variable_delete删除变量或集合（若仍在使用则拒绝删除）
annotation — 开发模式注释
工具描述
annotation_list读取节点上的注释；可选择包含类别
annotation_set批量创建或更新原生注释（Markdown）
reaction — 原型反应
工具描述
reaction_list读取节点中的原型反应（点击流、叠加层）
reaction_update将节点的反应替换为一个全新的数组
channel — 连接
工具描述
channel_join加入 WebSocket 通道，与插件建立通信

MCP 提示词

内置提示词可引导完成复杂的多步骤设计任务：

提示词描述
swap_overrides_instances将组件实例覆盖从源实例转移到多个目标实例

最佳实践

使用 Figma Edit MCP 时：

  1. 发送任何其他命令前，务必先使用 channel_join 加入通道。

注意事项

自动规范化节点 ID

从 Figma URL 复制的节点 ID 使用连字符（20485-41），但插件 API 要求使用冒号（20485:41）。MCP 服务会在转发前自动转换连字符格式的 ID，因此无需手动处理，两种格式均可使用。

致谢

本项目基于 sonnylazuardi 之前的工作，以及 grab/cursor-talk-to-figma-mcp 的贡献者所做的工作。在此感谢他们为本项目奠定基础。

感谢 @dusskapark 提供以下贡献：

  • 批量替换文本内容 — 高效批量更新大型设计中的文本。演示视频
  • 传播实例覆盖 — 通过一条命令将组件实例覆盖从源实例传播到多个目标实例，大幅减少重复的设计工作。演示视频

许可证

MIT 许可证（MIT）

Copyright (c) 2025 sonnylazuardi
Copyright (c) 2026 Neo Product LLC

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。