TalkToFigma MCP：AI直接操控Figma设计稿的开源神器

TalkToFigma 是什么

TalkToFigma 是由 Grab（东南亚超级应用）开源的一个 MCP（Model Context Protocol）集成项目，它在 Cursor、Claude Code 等 AI 智能体与 Figma 设计工具之间搭建了一条双向通道。借助这个方案，AI 不仅能读取 Figma 设计稿中的图层结构、样式参数，还能以编程方式直接修改设计内容。

Grab 是东南亚最大的超级应用平台，总部位于新加坡，业务覆盖出行、外卖、支付、金融等多个领域，服务超过 8 个国家的数亿用户。作为一家拥有庞大产品矩阵的科技公司，Grab 内部的设计与开发协作需求极为复杂——数十条产品线、多语言多市场的界面适配、频繁的 A/B 测试迭代，这些都对设计工程化效率提出了极高要求。TalkToFigma 的诞生正是 Grab 在内部实践中沉淀出的解决方案，随后选择开源回馈社区。

项目在 GitHub 上已收获超过 6700 颗星标和 727 个 Fork，在设计工程化领域引发了广泛关注。

核心能力：AI 与 Figma 的双向通信

精确读取设计信息

TalkToFigma 让 AI 智能体能够深入解析 Figma 文件的设计结构。具体来说，AI 可以获取：

图层层级关系：完整的节点树结构
组件属性：尺寸、位置、约束条件
视觉参数：颜色值、字体大小、间距、圆角等
设计 Token：样式变量和主题配置

其中，设计 Token（Design Token）是设计系统中的原子级变量，用于存储颜色、字号、间距、圆角、阴影等视觉属性的具体值。例如，一个名为 color-primary 的 Token 可能在浅色主题下对应 #1A73E8，在深色主题下对应 #8AB4F8。Token 的核心价值在于实现"单一数据源"——设计师在 Figma 中修改 Token 值后，开发侧的代码可以同步更新，确保设计与实现始终一致。目前业界常用的 Token 规范包括 W3C Design Tokens 标准和 Style Dictionary 等工具链。TalkToFigma 能够读取和操作 Figma 中的 Token，意味着 AI 可以直接参与设计系统的核心数据管理。

这意味着在设计转代码的场景中，AI 不再依赖截图识别或人工描述，而是直接拿到精确的设计数据。

编程式修改设计稿

更值得关注的是反向操作能力——AI 智能体可以在 Figma 中创建元素、调整布局、批量修改样式。设计师只需用自然语言描述需求，AI 就能在 Figma 画布上执行具体操作。

举个例子，你可以对 Cursor 说"把这个卡片组件的阴影加深，圆角改为 12px"，AI 会直接在 Figma 中完成修改，无需手动操作。

技术架构：MCP 协议如何连接 AI 与 Figma

MCP 协议简介

MCP（Model Context Protocol）是 Anthropic 推出的开放协议，用于标准化 AI 模型与外部工具之间的交互方式。其设计灵感类似于 Web 领域的 HTTP 协议——为 AI 模型与外部工具、数据源之间的交互建立统一的通信标准。在 MCP 出现之前，每个 AI 应用要接入外部工具都需要编写定制化的集成代码，导致大量重复工作和碎片化的生态。

MCP 定义了一套标准的客户端-服务器架构：AI 应用作为 MCP 客户端发起请求，外部工具通过 MCP 服务器暴露能力（称为 Tools）。这种标准化使得一个 MCP 服务器可以同时被多个 AI 客户端调用，极大降低了集成成本。目前，MCP 生态已经涵盖数据库、文件系统、浏览器、代码仓库等数百种工具集成。

TalkToFigma 利用这一协议，将 Figma 的设计操作能力封装为标准化接口，供支持 MCP 的 AI 客户端调用。

TalkToFigma 的通信架构

在具体实现上，TalkToFigma 依赖于 Figma 的 Plugin API。Figma 作为全球最主流的云端设计工具，提供两类主要的编程接口：一是 Plugin API，允许在 Figma 客户端内运行 JavaScript 代码，直接操作画布上的设计元素；二是 REST API，支持从外部系统读取文件结构、导出资源等。

TalkToFigma 在 Figma 中运行一个插件作为"桥梁"，通过 WebSocket 与本地的 MCP 服务器保持实时通信。当 AI 智能体发出操作指令时，MCP 服务器将指令转发给 Figma 插件，插件再调用 Figma 的内部 API 执行具体的设计操作。这种架构既保证了操作的实时性，也充分利用了 Figma Plugin API 对画布元素的完整控制能力。

目前支持的 AI 客户端

AI 工具	类型	典型使用场景
Cursor	AI 编程编辑器（基于 VS Code）	编码时直接引用和操作 Figma 设计稿
Claude Code	命令行 AI 编程工具	自动化批处理和脚本化工作流

Cursor 是近两年最受关注的 AI 原生代码编辑器，基于 VS Code 内核构建，深度集成了大语言模型能力。与传统的代码补全工具不同，Cursor 支持多文件上下文理解、自然语言指令编程、以及通过 MCP 协议接入外部工具。Claude Code 则是 Anthropic 推出的命令行 AI 编程工具，更适合自动化脚本和批处理场景。这两款工具都原生支持 MCP 协议，这意味着它们可以无缝调用 TalkToFigma 提供的 Figma 操作能力，让开发者在编码环境中直接与设计稿交互，无需切换工具窗口。

由于采用了标准化的 MCP 协议，未来任何兼容该协议的 AI 工具都可以接入 Figma，扩展性相当不错。

实际应用场景

设计转代码（Design-to-Code）

传统流程中，前端开发者需要在 Figma 和编辑器之间反复切换，手动提取颜色值、间距、字号等参数。使用 TalkToFigma 后，Cursor 可以直接读取设计稿的精确数据，生成还原度更高的前端代码。

在前端开发领域，"像素级还原"一直是设计与开发协作中的核心痛点。传统工作流中，开发者需要使用 Figma 的 Inspect 面板逐个提取 CSS 属性值，然后在代码中手动编写对应样式。这个过程不仅耗时，还容易出现误差——颜色值的色彩空间转换、响应式布局下的间距换算、不同平台的字体渲染差异等，都可能导致最终实现与设计稿存在偏差。业界虽然已有 Zeplin、Locofy 等设计交付工具试图解决这一问题，但它们大多是单向的"设计到代码"转换，缺乏双向交互能力。TalkToFigma 的价值在于，AI 可以直接获取 Figma 的结构化设计数据（而非像素截图），从源头上消除信息传递中的损耗。

对于追求"像素级还原"的团队来说，这能省下大量反复比对和微调的时间。

批量设计修改

设计师日常工作中有不少重复性操作，比如：

将所有按钮的圆角从 4px 统一改为 8px
把整套界面的主色调从蓝色切换为绿色
批量调整某类组件的内边距

这些操作通过自然语言指令下达给 AI，几秒钟就能在 Figma 中全部完成。

设计系统维护

大型团队维护设计系统时，常常面临组件不一致、Token 值过期等问题。AI 智能体可以自动扫描设计文件，检查组件规范、批量更新 Token、甚至生成设计文档，把这些琐碎但重要的工作从人的手中接过来。

对设计开发协作的影响

TalkToFigma 背后反映的趋势是：AI 正在从"理解内容"进化到"操控工具"。

这一趋势在业界被称为 Agentic AI 或 AI Agent 范式。与传统的对话式 AI 不同，AI Agent 具备感知环境、制定计划、调用工具、执行动作的完整能力闭环。2024 年以来，这一范式加速落地：Anthropic 推出了 Computer Use 功能让 AI 直接操作桌面应用，OpenAI 的 GPT-4 支持函数调用（Function Calling）与外部系统交互，Google 的 Gemini 也在探索多模态工具调用。

过去，AI 只能通过分析设计截图或阅读文字描述来"猜测"设计意图。现在，它可以直接接入 Figma 的 API 层，获取结构化数据并执行操作，实现真正意义上的双向交互。

往更远看，这预示着一种新的工作模式——AI 智能体串联设计、开发、测试等不同环节的工具，形成端到端的自动化链路。在设计开发领域，AI Agent 可以串联 Figma（设计）、GitHub（代码管理）、Jira（项目管理）、Vercel（部署）等工具，形成从设计稿到线上产品的端到端自动化流水线。TalkToFigma 正是这条链路中连接设计环节的关键一环。Grab 选择将这个项目开源，也说明头部科技公司已经在认真布局 AI 驱动的产品研发流程。

总结

TalkToFigma 通过 MCP 协议打通了 AI 智能体与 Figma 之间的壁垒，让设计数据的读取和设计稿的修改都可以由 AI 自动完成。无论是设计转代码、批量样式调整，还是设计系统的日常维护，它都提供了切实可用的效率提升方案。

随着 MCP 生态的扩展和更多 AI 工具的接入，这类"AI + 设计工具"的集成方案很可能成为设计开发协作的标准基础设施。如果你的团队同时使用 Figma 和 Cursor，TalkToFigma 值得尽早尝试。