模型工具, Cursor × Figma 的 MCP 实现机制

 

模型工具, Cursor × Figma 的 MCP 实现机制



Cursor Talk to Figma MCP 这款工具能让 Cursor AI 直接读取和编辑你的 Figma 设计文件,可调用 get_selection(获取选中内容)、set_text_content(批量修改文本)、create_rectangle(创建矩形)、set_instance_overrides(设置组件实例覆盖属性)等工具 / 接口。配置流程十分简便:安装 Bun 运行时,执行 bun setup 和 bun socket 命令,再添加 Figma 插件即可。这一工具能帮你省去频繁切换操作上下文的时间,自动化完成文本替换、覆盖属性批量同步等重复性工作,加速 “设计转代码” 的工作流程,同时确保所有内容保持同步,让开发构建过程更高效、精准。

Cursor Talk to Figma MCP。它的核心目标很明确——让运行在 Cursor 里的大模型,通过 MCP(Model Context Protocol)与 Figma 建立通信,从而读取和修改设计文件。

它不是“AI 自动帮你做设计”的那类工具,也不是一个完整的设计转代码平台,而是一个更底层的能力暴露层:把 Figma 的部分操作能力封装成 MCP tools,供 Cursor 调用。

整个机制可以理解为三层结构。

最上层是 Cursor,负责和大模型交互。
中间是 MCP 服务进程,运行在本地。
底层则是通过插件桥接到 Figma 文档。

本地服务通常基于 Bun 运行,执行 bun setup 初始化依赖,再通过 bun socket 启动通信服务。Figma 插件端则负责把当前文档内容、选中节点等信息,通过 socket 发送给 MCP 服务。MCP 再将这些能力以“工具”的形式暴露给 Cursor。

从能力层面看,它提供的是一组可调用接口,例如:

  • get_selection:获取当前选中节点
  • set_text_content:批量修改文本内容
  • create_rectangle:创建矩形节点
  • set_instance_overrides:设置组件实例的覆盖属性

这些接口并不做任何“自动设计判断”,它们只是把 Figma 的操作抽象成结构化指令。真正决定调用逻辑的是大模型。

项目本身并没有声称实现“实时双向同步”或“完整设计转代码系统”。它只是建立了一条可控的通道,使得 Cursor 中的大模型可以:

  1. 读取当前设计结构
  2. 修改节点属性
  3. 批量更新文本或实例覆盖

是否用于“设计转代码”,取决于你在 Cursor 中如何编排 prompt。

举个更技术化的理解方式:

以前的流程是——开发者打开 Figma,看尺寸和样式,再手动写代码。
现在的模式是——模型可以读取设计结构,再基于结构生成代码。

但这个项目本身只负责“读取”和“操作”的能力,并不负责“代码生成逻辑”。

因此,如果从严谨角度看,它更接近:

一个将 Figma 文档操作能力封装为 MCP 工具的桥接服务。

而不是一个完整的 AI 设计自动化平台。

它的价值在于降低上下文切换成本。你不需要频繁在设计软件与编辑器之间来回跳转。模型可以直接获取当前选区内容、修改文本、调整实例属性,从而实现批量替换或结构化更新。

尤其是在大量文本替换、组件实例覆盖同步这类重复性操作场景中,这种能力会明显减少人工干预。

它展示了一种模式——

通过 MCP,把本地软件的能力开放给大模型。

是 Figma,也可以是 IDE、视频编辑器、数据库客户端,甚至 CAD 工具。

如果从设计转向开发,或者本身就关注“设计—代码自动化”的路径,这类项目比单纯的“AI 生成代码”更值得关注。因为它解决的是上下文接入问题,而上下文接入,是所有 Agent 能力的前提。

严格来说,这个项目做的不是自动化本身,而是自动化的接口基础设施。

Github:https://github.com/grab/cursor-talk-to-figma-mcp
油管:https://youtu.be/RUKbF38VPYU


留言