Talk to Figma MCP

光标与 Figma MCP 对话

该项目实现了 Cursor AI 和 Figma 之间的模型上下文协议 (MCP) 集成，允许 Cursor 与 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 - WebSocket 服务器，用于促进 MCP 服务器和 Figma 插件之间的通信

开始

1. 如果尚未安装 Bun，请安装：

2. 运行安装程序，这也会将 MCP 安装在 Cursor 的活动项目中

3. 启动 Websocket 服务器

4. MCP 服务器

5. 安装Figma 插件

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

感谢@dusskapark贡献的批量文本替换功能。以下是演示视频。

实例覆盖传播 这是@dusskapark的另一个贡献，只需一个命令即可将组件实例覆盖从一个源实例传播到多个目标实例。此功能在处理需要类似自定义的组件实例时，可显著减少重复的设计工作。查看我们的演示视频。

手动设置和安装

MCP 服务器：与 Cursor 集成

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

WebSocket 服务器

启动 WebSocket 服务器：

Figma 插件

1. 在 Figma 中，转到“插件”>“开发”>“新插件”
2. 选择“链接现有插件”
3. 选择src/cursor_mcp_plugin/manifest.json文件
4. 该插件现在应该可以在你的 Figma 开发插件中使用

Windows + WSL 指南

1. 通过 powershell 安装 bun

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

3. 启动 websocket

用法

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

MCP 工具

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

文档与选择

• get_document_info - 获取有关当前 Figma 文档的信息
• get_selection - 获取有关当前选择的信息
• read_my_design - 获取当前选择的详细节点信息（无需参数）
• get_node_info - 获取特定节点的详细信息
• get_nodes_info - 通过提供节点 ID 数组获取有关多个节点的详细信息

注释

• 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 - 设置框架的布局模式和换行行为（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 - 使用可选的每个角控制设置节点的角半径

布局和组织

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

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生成连接线，以实现清晰的视觉流程映射。

执照

麻省理工学院