英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

与 Figma MCP 对话

该项目实现了 AI 代理（Cursor、Claude Code）与 Figma 之间的模型上下文协议（MCP）集成，使 AI 代理能够与 Figma 通讯，以读取设计并以编程方式修改它们。

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

项目结构

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

如何使用

1. 如果你还没有安装 Bun，请安装：

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

2. 运行设置，这也会在你光标所在的活动项目中安装 MCP

bun setup

3. 启动 Websocket 服务器

bun socket

4. 新 从 Figma 社区页面 安装 Figma 插件或 本地安装

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

感谢 @dusskapark 贡献了批量文本替换功能。这里有 演示视频。

实例覆盖传播 又一项来自 @dusskapark 的贡献。使用单个命令将组件实例的覆盖从源实例传播到多个目标实例。此功能在处理需要类似自定义的组件实例时，可以大大减少重复设计工作。查看我们的 演示视频。

手动设置和安装

MCP 服务器：与 Cursor 集成

将服务器添加到您的 Cursor MCP 配置中，位置在 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

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"

2. 在 src/socket.ts 中取消注释主机名 0.0.0.0

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

3. 启动 websocket

bun socket

使用方法

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

本地开发设置

要开发，请更新你的 mcp 配置以指向本地目录。

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

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_section - 创建一个部分以在画布上分组相关内容
• create_text - 创建一个具有可自定义字体属性的新文本节点

修改文本内容

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

自动布局与间距

• set_layout_mode - 设置框架的布局模式和换行行为（NONE、HORIZONTAL、VERTICAL）
• set_padding - 设置自动布局框架的内边距值（上、右、下、左）
• set_axis_align - 设置自动布局框架的主轴和副轴对齐方式
• set_layout_sizing - 设置自动布局框架的水平和垂直尺寸模式（FIXED、HUG、FILL）
• set_item_spacing - 设置自动布局框架中子项之间的间距

样式

• set_fill_color - 设置节点的填充颜色（RGBA）
• set_stroke_color - 设置节点的描边颜色和粗细
• set_corner_radius - 设置节点的圆角半径，可选择每个角分别控制
• set_image_fill - 使用本地文件路径、URL 或 base64 数据为节点填充图像（FILL、FIT、CROP 或 TILE）

布局与组织

• move_node - 移动节点到新位置
• resize_node - 用新尺寸调整节点大小
• delete_node - 删除节点
• delete_multiple_nodes - 高效一次删除多个节点
• clone_node - 创建现有节点的副本，可选择位置偏移
• rename_node - 重命名节点
• set_parent - 将节点移动到新的父级（区段、画框或组），默认保持其绝对位置

组件与样式

• 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 插件

1. 导航到 Figma 插件目录：

   cd src/cursor_mcp_plugin

2. 编辑 code.js 和 ui.html

最佳实践

在使用 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 生成连接线以清晰显示流程映射。

许可

麻省理工学院