https://www.figma.com/mcp-catalog/

点进去一步步跟着操作

添加插件、授权认证、使用

使用流程 (基于 Figma‑MCP + Cursor)

  1. 确保 Figma 端已开启 MCP Server

    • 如果用的是远程 MCP（官方 remote server / token + API），确保你已正确配置并已授权连接。
    • 如果你用的是 Figma Desktop：打开 Figma → 切到 Dev Mode → 在右侧 “MCP server” 面板中启用本地 MCP。这样本地服务一般运行在 http://127.0.0.1:3845/mcp。

  2. 在 Cursor 中确认 MCP Server 已连接

    • 打开 Cursor → 进入 Settings → MCP tab → 确认你的 Figma‑MCP server 在列表中，并且状态是可用 / 已连接。
    • 如果是通过 URL（SSE / HTTP）连接，确保 URL 正确。若是通过 stdio / command 启动服务，也要保证命令可执行且 server 正在运行。

  3. 在 Figma 中复制你想操作的设计元素链接

    • 在 Figma 打开某个 frame / group / component → 右键 “Copy link to selection”。这个 link 会被用来告诉 MCP “你想操作哪个节点 (node)”。

  4. 回到 Cursor，切换到 “Agent / Composer 模式”

    • 在 Cursor 的聊天 / 编写界面 (Agent 模式 / Composer 模式) 中，粘贴刚刚复制的 Figma 链接。
    • 用自然语言 prompt 描述你要做什么，比如 “请帮我把这个 frame 转成 React + Tailwind 组件”，或者 “帮我导出这个设计的 CSS 样式 / layout /颜色 /字体”。 Cursor 会调用 MCP，把设计数据拉进来，然后结合你的 prompt + LLM 输出。

三方 TalkToFigma（推荐）

Cursor 与 Figma MCP 对话

https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

该项目实现了 Cursor AI 和 Figma 之间的模型上下文协议 (MCP) 集成，使 Cursor 能够与 Figma 通信，以读取设计并以编程方式修改它们。

最大优点是没有官方MCP插件的速率限制

项目结构

  • src/talk_to_figma_mcp/- 用于 Figma 集成的 TypeScript MCP 服务器
  • src/cursor_mcp_plugin/- 用于与 Cursor 通信的 Figma 插件
  • src/socket.ts- 用于促进 MCP 服务器和 Figma 插件之间通信的 WebSocket 服务器

开始使用

环境配置

如果还没有安装 Bun，请安装：

curl -fsSL https://bun.sh/install | bash

运行 setup 程序，这也会将 MCP 安装到 Cursor 的活动项目中。

bun setup

启动 WebSocket 服务器

bun socket

开发环境

要进行开发，请更新您的 mcp 配置，使其指向您的本地目录。

{
  "mcpServers": {
    "TalkToFigma": {
      "command": ""/Users/userxxx/.bun/bin/bun"",
      "args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
    }
  }
}

WebSocket 服务器

启动 WebSocket 服务器：

bun socket

Figma插件

  1. 在 Figma 中，转到“插件”>“开发”>“导入插件”。
  2. 选择“链接现有插件”
  3. 选择src/cursor_mcp_plugin/manifest.json文件
  4. 现在该插件应该可以在您的 Figma 开发插件列表中找到了。

Windows + WSL 指南

  1. 通过 PowerShell 安装 bun
powershell -c "irm bun.sh/install.ps1|iex"
  1. 0.0.0.0取消注释主机名src/socket.ts
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
  1. 启动 WebSocket
bun socket

用法

  1. 启动 WebSocket 服务器
  2. 在 Cursor 中安装 MCP 服务器
  3. 打开 Figma 并运行 Cursor MCP 插件
  4. 使用以下方式将插件连接到 WebSocket 服务器：加入通道join_channel
  5. 使用 Cursor 通过 MCP 工具与 Figma 进行通信

设计自动化示例

批量文本内容替换

文本替换功能。这是演示视频。

实例覆盖传播

使用单个命令即可将组件实例覆盖从源实例传播到多个目标实例。此功能可显著减少处理需要类似自定义的组件实例时重复的设计工作。观看我们的演示视频。

MCP 工具

MCP 服务器提供以下用于与 Figma 交互的工具：

文件与选择

  • get_document_info- 获取有关当前 Figma 文档的信息
  • get_selection- 获取有关当前选材的信息
  • read_my_design- 获取当前选定节点的详细信息，无需参数
  • get_node_info获取特定节点的详细信息
  • get_nodes_info- 通过提供节点 ID 数组，获取多个节点的详细信息
  • set_focus- 选择特定节点并滚动视口至该节点，即可将焦点设置到该节点上。
  • set_selections- 选择多个节点并滚动视口以显示它们

注释

  • get_annotations- 获取当前文档或指定节点中的所有注释
  • set_annotation- 创建或更新支持 Markdown 的注释
  • set_multiple_annotations- 高效地批量创建/更新多个注解
  • scan_nodes_by_types- 扫描具有特定类型的节点（可用于查找注释目标）

原型设计与连接

  • get_reactions- 获取节点的所有原型反应，并带有视觉高亮动画
  • set_default_connector- 将复制的 FigJam 连接器设置为创建连接的默认连接器样式（必须在创建连接之前设置）
  • create_connections- 基于原型流程或自定义映射，在节点之间创建 FigJam 连接线

创建元素

  • create_rectangle- 创建一个新的矩形，并指定位置、大小和可选名称
  • create_frame- 创建一个新的框架，并设置位置、大小和可选名称
  • create_text- 创建具有可自定义字体属性的新文本节点

修改文本内容

  • scan_text_nodes- 使用智能分块技术扫描大型设计中的文本节点
  • set_text_content- 设置单个文本节点的文本内容
  • set_multiple_text_contents- 高效地批量更新多个文本节点

自动布局和间距

  • set_layout_mode- 设置框架的布局模式和换行行为（无、水平、垂直）
  • set_padding- 设置自动布局框架的内边距值（上、右、下、左）
  • set_axis_align- 设置自动布局框架的主轴和反轴对齐方式
  • set_layout_sizing- 设置自动布局框架的水平和垂直尺寸模式（固定、环绕、填充）
  • set_item_spacing- 设置自动布局框架中子元素之间的距离

造型

  • set_fill_color- 设置节点的填充颜色（RGBA）
  • set_stroke_color- 设置节点的描边颜色和粗细
  • set_corner_radius- 设置节点的圆角半径，并可选择对每个圆角进行控制

布局与组织

  • move_node- 将节点移动到新位置
  • resize_node- 使用新的尺寸调整节点大小
  • delete_node- 删除节点
  • delete_multiple_nodes- 高效地一次性删除多个节点
  • clone_node- 创建现有节点的副本，并可选择添加位置偏移。

组件和样式

  • get_styles- 获取有关当地风格的信息
  • get_local_components- 获取有关本地组件的信息
  • create_component_instance- 创建组件实例
  • get_instance_overrides- 从选定的组件实例中提取覆盖属性
  • set_instance_overrides- 将提取的覆盖应用于目标实例

出口及高级

  • export_node_as_image- 将节点导出为图像（PNG、JPG、SVG 或 PDF） - 目前对图像的支持有限，仅返回 base64 编码的文本。

连接管理

  • join_channel加入特定频道与 Figma 进行沟通

MCP提示

MCP 服务器包含多个辅助提示，可指导您完成复杂的设计任务：

  • design_strategy使用 Figma 设计的最佳实践
  • read_design_strategy阅读 Figma 设计的最佳实践
  • text_replacement_strategy- 用于在 Figma 设计中替换文本的系统方法
  • annotation_conversion_strategy将手动注释转换为 Figma 原生注释的策略
  • swap_overrides_instances- Figma中组件实例间覆盖值传递策略
  • reaction_to_connector_strategy- 制定策略，利用“get_reactions”的输出将Figma原型反应转换为连接线，并指导按顺序使用“create_connections”。

最佳实践

使用 Figma MCP 时：

  1. 发送命令前务必先加入频道
  2. get_document_info首先，获取文档概览。
  3. get_selection修改前请检查当前选择。
  4. 根据需要使用合适的创作工具：
    • create_frame用于容器
    • create_rectangle基本形状
    • create_text文本元素
  5. 使用以下方式验证更改get_node_info
  6. 为了保持一致性，尽可能使用组件实例。
  7. 请妥善处理错误，因为所有命令都可能抛出异常。
  8. 对于大型设计：
    • 在分块参数中使用scan_text_nodes
    • 通过 WebSocket 更新监控进度
    • 实施适当的错误处理
  9. 文本操作：
    • 尽可能使用批量操作
    • 考虑结构关系
    • 使用目标导出验证更改
  10. 用于转换旧版注解：
    • 扫描文本节点以识别编号标记和描述
    • 用于scan_nodes_by_types查找注释所引用的 UI 元素
    • 使用路径、名称或邻近性将标记与其目标元素进行匹配。
    • 使用适当的方式对注释进行分类get_annotations
    • set_multiple_annotations批量创建原生注解
    • 验证所有注释是否已正确链接到其目标。
    • 转换成功后，删除旧版注释节点。
  11. 将原型面条可视化为 FigJam 连接器：
  • 用于get_reactions提取原型流程图
  • 使用以下方式设置默认连接器set_default_connector：
  • 并生成连接线，create_connections以便清晰地绘制流程图。

更加详细参考

https://zhuanlan.zhihu.com/p/1897249661569447152