TalkToFigma MCP：让 AI 真正「看懂」设计稿

Grab 组织头像

图1：TalkToFigma MCP 由东南亚超级应用巨头 Grab 打造，Star 数高达 6800，是目前最流行的 AI×设计工具集成方案之一。

痛点：一个困扰 AI 编程团队很久的问题

想象一下这个场景：设计师在 Figma 里改了三版按钮样式，前端工程师在 Cursor 里写代码，需要对照设计稿调整 CSS。传统做法是截图发给工程师，或者在 Figma 和 IDE 之间来回切换——费时费力。更关键的是，当 AI 助手帮你写代码时，它根本「看不见」设计稿，只能靠你描述。

TalkToFigma MCP 解决的就是这个核心矛盾：让 AI Agent 直接与 Figma 双向通信——AI 不仅能读设计稿获取精确尺寸、颜色、字体，还能反过来修改 Figma 中的元素。这意味着整个「看设计 → 写代码 → 调样式」的工作流，正在被 AI Agent 自动化接管。

这个项目的发起者是 Sonny Lazuardi，来自东南亚超级应用巨头 Grab（类似滴滴+美团的平台）的设计技术团队。他将这个工具定位为「设计-开发协作的最后一公里」解决方案。

核心原理：三层架构实现 AI ↔ Figma 双向通信

TalkToFigma MCP 并不是一个单一程序，而是由三个核心组件构成的分层架构：

第一层：MCP Server（TypeScript） —— 这是 AI Agent 的「眼睛和手」。它实现了 Model Context Protocol（MCP）标准接口，暴露给 Cursor、Claude Code 等 AI 编程工具使用。MCP 是 Anthropic 提出的开放协议，让 AI 模型可以调用外部工具。MCP Server 本质上是一个中转站，把 AI 的请求转发给 Figma，再把 Figma 的响应返回给 AI。代码位于 src/talk_to_figma_mcp/server.ts，基于 @modelcontextprotocol/sdk 实现。

第二层：Figma Plugin（TypeScript） —— 这是 Figma 端的「接收器」。需要在 Figma Desktop App 中安装一个本地插件（src/cursor_mcp_plugin/），该插件运行在 Figma 的沙箱环境中，可以直接访问 Figma 的文档对象模型（Document Object Model），执行读取节点、修改文字、创建连接线等操作。

第三层：WebSocket Bridge（TypeScript） —— 这是连接 MCP Server 和 Figma Plugin 的「桥梁」。由于 Figma 插件运行在浏览器沙箱中，无法直接与本地 MCP Server 通信，项目用 src/socket.ts 实现了一个轻量级 WebSocket 中继服务器（默认端口 3055），MCP Server 和 Figma Plugin 都连接到这个服务器，通过 Channel 机制实现消息路由。

核心能力：从「读设计」到「改设计」的全链路

读取设计信息

MCP Server 提供了丰富的读取工具，覆盖了设计师日常协作的各个层面：

get_document_info：获取整个 Figma 文档的概要信息（页面数、节点树结构）。
get_selection：获取当前选中的元素信息。
read_my_design / get_node_info：获取选中节点或指定节点的完整属性——包括坐标、尺寸、颜色（精确到 RGBA）、字体（字体族、粗细、大小）、特效、布尔运算等。
get_annotations：读取文档中的注释/标注。

这些工具让 AI 能够精确了解设计稿的每一个细节，不再需要工程师猜测「这个按钮的圆角是 8px 还是 12px」。

修改设计元素

更强大的能力是 AI 可以反向修改 Figma：

create_rectangle / create_frame / create_text：AI 可以在 Figma 中创建新的矩形、画板和文本节点。
set_annotation：为节点添加/更新注释。
set_selections：批量选中多个节点并滚动到视图中心。
set_focus：聚焦到特定节点。

社区还贡献了更高级的功能，例如 @dusskapark 的批量文本替换和组件实例覆盖传播功能，大幅提升了批量设计修改的效率。

FigJam 连接线自动化

get_reactions：获取原型流程中的交互反应。
set_default_connector：设置默认连接器样式。
create_connections：批量在节点之间创建连接线。

技术栈：TypeScript + Bun + MCP SDK

项目采用纯 TypeScript 开发，使用 Bun 作为运行时和包管理器（也支持 Node.js）。核心依赖：

@modelcontextprotocol/sdk@1.13.1：MCP 协议的官方 SDK
ws：WebSocket 通信
zod@3.22.4：运行时类型校验
uuid：唯一 ID 生成

构建工具使用 tsup（基于 esbuild），最终输出到 dist/ 目录。打包后可通过 bunx cursor-talk-to-figma-mcp@latest 远程运行，或直接引用本地路径进行开发调试。

Dockerfile 使用 oven/bun:latest 镜像，单阶段构建，暴露 3055 端口。由于没有 docker-compose.yml，容器化部署需要手动管理 WebSocket Bridge 和 MCP Server 的启动顺序。

上手门槛：CLI 工具，有一定配置复杂度

优点：

提供了 bun setup 一键安装脚本，自动配置 Cursor 的 MCP 设置
支持 Smithery 平台（AI Agent 工具市场）一键安装
代码质量高：TypeScript 严格模式，接口定义完整

缺点：

没有图形界面，全程命令行配置
必须安装 Figma Desktop App（Figma Web 版无法运行本地插件）
WebSocket Bridge 需要额外启动：bun socket
Windows + WSL 用户需要额外配置 hostname: 0.0.0.0
文档主要是英文，中文资料较少

局限与挑战

Figma 插件必须本地运行：Figma Web 版不支持本地插件，这是硬性限制。
依赖顺序敏感：必须先启动 WebSocket Bridge，再让 MCP Server 连接，再打开 Figma 插件加入 Channel——顺序不对整个链路就断了。
架构理解成本：三层架构对新手不友好，调试时需要在 MCP Server 日志、Figma 插件控制台、WebSocket Bridge 日志之间切换。
安全考虑：WebSocket Bridge 没有认证机制，在团队内网使用没问题，但暴露到公网需要注意访问控制。

行业意义：设计-开发自动化的重要里程碑

TalkToFigma MCP 不仅是又一个 MCP 工具，更代表了一个重要趋势：AI Agent 正在从「代码生成」向「端到端工作流自动化」演进。过去 AI 编程工具的局限在于它只能处理文本，设计稿、API 文档、数据库结构都需要人来转译。现在，通过 MCP 协议，AI 可以直接操作 Figma、数据库、浏览器等工具，真正成为「数字世界的工作者」。

项目获得了 6800 颗星，736 个 Fork，82 个 open issues，说明社区活跃度高。Grab 作为企业背景背书，项目有一定的可持续性保障。

快速部署

# 方式一：Bun 一键安装（推荐）
curl -fsSL https://bun.sh/install | bash
bun setup  # 自动配置 Cursor MCP

# 方式二：Docker 部署
docker build -t cursor-talk-to-figma-mcp .
docker run -p 3055:3055 cursor-talk-to-figma-mcp

# 启动 WebSocket Bridge
bun socket

# 在 Cursor 中使用
# AI 会自动通过 MCP 调用 Figma 工具

TalkToFigma MCP：让 AI 真正「看懂」设计稿

Grab 组织头像

图1：TalkToFigma MCP 由东南亚超级应用巨头 Grab 打造，Star 数高达 6800，是目前最流行的 AI×设计工具集成方案之一。

痛点：一个困扰 AI 编程团队很久的问题

核心原理：三层架构实现 AI ↔ Figma 双向通信

TalkToFigma MCP 并不是一个单一程序，而是由三个核心组件构成的分层架构：

核心能力：从「读设计」到「改设计」的全链路

读取设计信息

MCP Server 提供了丰富的读取工具，覆盖了设计师日常协作的各个层面：

get_document_info：获取整个 Figma 文档的概要信息（页面数、节点树结构）。
get_selection：获取当前选中的元素信息。
read_my_design / get_node_info：获取选中节点或指定节点的完整属性——包括坐标、尺寸、颜色（精确到 RGBA）、字体（字体族、粗细、大小）、特效、布尔运算等。
get_annotations：读取文档中的注释/标注。

这些工具让 AI 能够精确了解设计稿的每一个细节，不再需要工程师猜测「这个按钮的圆角是 8px 还是 12px」。

修改设计元素

更强大的能力是 AI 可以反向修改 Figma：

create_rectangle / create_frame / create_text：AI 可以在 Figma 中创建新的矩形、画板和文本节点。
set_annotation：为节点添加/更新注释。
set_selections：批量选中多个节点并滚动到视图中心。
set_focus：聚焦到特定节点。

社区还贡献了更高级的功能，例如 @dusskapark 的批量文本替换和组件实例覆盖传播功能，大幅提升了批量设计修改的效率。

FigJam 连接线自动化

get_reactions：获取原型流程中的交互反应。
set_default_connector：设置默认连接器样式。
create_connections：批量在节点之间创建连接线。

技术栈：TypeScript + Bun + MCP SDK

项目采用纯 TypeScript 开发，使用 Bun 作为运行时和包管理器（也支持 Node.js）。核心依赖：

@modelcontextprotocol/sdk@1.13.1：MCP 协议的官方 SDK
ws：WebSocket 通信
zod@3.22.4：运行时类型校验
uuid：唯一 ID 生成

上手门槛：CLI 工具，有一定配置复杂度

优点：

提供了 bun setup 一键安装脚本，自动配置 Cursor 的 MCP 设置
支持 Smithery 平台（AI Agent 工具市场）一键安装
代码质量高：TypeScript 严格模式，接口定义完整

缺点：

没有图形界面，全程命令行配置
必须安装 Figma Desktop App（Figma Web 版无法运行本地插件）
WebSocket Bridge 需要额外启动：bun socket
Windows + WSL 用户需要额外配置 hostname: 0.0.0.0
文档主要是英文，中文资料较少

局限与挑战

Figma 插件必须本地运行：Figma Web 版不支持本地插件，这是硬性限制。
依赖顺序敏感：必须先启动 WebSocket Bridge，再让 MCP Server 连接，再打开 Figma 插件加入 Channel——顺序不对整个链路就断了。
架构理解成本：三层架构对新手不友好，调试时需要在 MCP Server 日志、Figma 插件控制台、WebSocket Bridge 日志之间切换。
安全考虑：WebSocket Bridge 没有认证机制，在团队内网使用没问题，但暴露到公网需要注意访问控制。

行业意义：设计-开发自动化的重要里程碑

项目获得了 6800 颗星，736 个 Fork，82 个 open issues，说明社区活跃度高。Grab 作为企业背景背书，项目有一定的可持续性保障。

快速部署

# 方式一：Bun 一键安装（推荐）
curl -fsSL https://bun.sh/install | bash
bun setup  # 自动配置 Cursor MCP

# 方式二：Docker 部署
docker build -t cursor-talk-to-figma-mcp .
docker run -p 3055:3055 cursor-talk-to-figma-mcp

# 启动 WebSocket Bridge
bun socket

# 在 Cursor 中使用
# AI 会自动通过 MCP 调用 Figma 工具