Talk to Figma MCP

本项目实现了 AI Agent（如 Cursor、Claude Code）与 Figma 之间的 Model Context Protocol (MCP) 集成，使 AI Agent 能够与 Figma 通信，从而以编程方式读取和修改设计稿。

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

项目结构

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

如何使用

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

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

2. 运行安装程序，这将同时在你的 Cursor 活动项目中安装 MCP：

bun setup

3. 启动 WebSocket 服务器：

bun socket

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

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

感谢 @dusskapark 贡献了批量文本替换功能。点击查看 演示视频。

实例覆盖（Instance Override）传播 同样由 @dusskapark 贡献。 通过单条命令即可将组件实例的覆盖设置从源实例传播到多个目标实例。当处理需要类似自定义设置的组件实例时，该功能可大幅减少重复性设计工作。查看我们的 演示视频。

手动设置与安装

MCP Server：与 Cursor 集成

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

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

WebSocket 服务器

启动 WebSocket 服务器：

bun socket

Figma 插件

1. 在 Figma 中，转到 Plugins > Development > New Plugin
2. 选择 "Link existing plugin"
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 server 提供了以下用于与 Figma 交互的工具：

文档与选择 (Document & Selection)

• get_document_info - 获取当前 Figma 文档的信息
• get_selection - 获取当前选中项的信息
• read_my_design - 无需参数即可获取当前选中项的详细节点信息
• get_node_info - 获取特定节点的详细信息
• get_nodes_info - 通过提供节点 ID 数组获取多个节点的详细信息
• set_focus - 通过选中节点并滚动视口使其聚焦
• set_selections - 设置多个节点为选中状态并滚动视口以显示它们

注释 (Annotations)

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

原型与连接 (Prototyping & Connections)

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

创建元素 (Creating Elements)

• create_rectangle - 创建带有位置、大小及可选名称的新矩形
• create_frame - 创建带有位置、大小及可选名称的新画板 (Frame)
• create_text - 创建带有可自定义字体属性的新文本节点