grab/cursor-talk-to-figma-mcp

TalkToFigma: MCP integration between AI Agent (Cursor, Claude Code) and Figma, allowing Agentic AI to communicate with Figma for reading designs and modifying them programmatically.

agentagenticagentic-aiaiai-agentsautomationcursordesignfigmagenerative-aillmllmsmcpmodel-context-protocol

GAI 中文摘要

TalkToFigma 是一个基于模型上下文协议（MCP）的集成工具，旨在连接 AI 代理（如 Cursor 或 Claude Code）与 Figma 设计平台。它通过建立 WebSocket 通信链路，使 AI 能够直接读取设计文档并以编程方式修改 Figma 内容，从而实现设计工作流的自动化。

该项目提供获取 Figma 文档详细信息的功能，方便 AI 实时感知当前设计上下文。支持通过 AI 指令批量替换文本内容，提升大规模文案修改效率。具备实例覆盖（Instance Override）传播能力，可一键将组件的定制化修改同步至多个目标实例。通过统一的 MCP 工具接口，实现 AI 对 Figma 选区和元素的程序化控制。

该项目适用于需要高频更新设计资产、进行大规模布局调整或希望实现设计到代码自动化协同的开发者与产品设计师。特别适合在 Cursor 等编辑器中通过自然语言指令快速处理 Figma 设计任务的开发工作流。

⭐

6.8k

Stars

🔱

738

Forks

👁

Watchers

📋

Issues

JavaScriptMIT创建于 2025/3/16更新于今天

在 GitHub 上查看访问主页

README

由 Gemini 翻译整理

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 服务器

如何使用

如果尚未安装 Bun，请先安装：

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

运行安装配置，这也会在你的 Cursor 活动项目中安装 MCP：

bun setup

启动 WebSocket 服务器：

bun socket

新功能：从 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 插件

在 Figma 中，进入 Plugins > Development > New Plugin
选择 "Link existing plugin"
选择 src/cursor_mcp_plugin/manifest.json 文件
该插件现在应可在你的 Figma 开发插件中找到

Windows + WSL 指南

通过 PowerShell 安装 bun：

powershell -c "irm bun.sh/install.ps1|iex"

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

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

启动 websocket：

bun socket

使用方法

启动 WebSocket 服务器
在 Cursor 中安装 MCP server
打开 Figma 并运行 Cursor MCP 插件
通过使用 join_channel 加入频道，将插件连接到 WebSocket 服务器
使用 Cursor 通过 MCP tools 与 Figma 通信

本地开发设置

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

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

MCP Tools

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 - 创建一个带有位置、大小和可选名称的新框架
create_text - 创建一个具有可自定义字体属性的新文本节点