Cursor 与 Figma MCP 通信

该项目实现了 Cursor AI 和 Figma 之间的 Model Context Protocol (MCP) 集成，允许 Cursor 读取设计并以编程方式修改它们。

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

1. 运行设置脚本，这也会在你的 Cursor 活动项目中安装 MCP

bun setup

1. 启动 WebSocket 服务器

bun socket

1. MCP 服务器

bunx cursor-talk-to-figma-mcp

1. 安装 Figma 插件

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

感谢 @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"

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

// 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. 通过使用 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 - 扫描具有特定类型（对于查找注解目标很有用）的节点

创建元素

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

修改文本内容

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

样式设置

• 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 - 创建组件的一个实例

导出与高级功能

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

连接管理

• join_channel - 加入特定频道以与 Figma 通信

开发

构建 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 批量创建原生注释
    • 验证所有注释是否正确链接到其目标
    • 成功转换后删除旧版注释节点

许可

MIT