cursor-talk-to-figma-mcp

让 AI 直接读写 Figma,设计秒变代码

TalkToFigma 是一个开源 MCP 集成项目,旨在打通 AI 编程助手(如 Cursor、Claude Code、Codex)与 Figma 设计工具之间的壁垒。它通过模型上下文协议(MCP)让 AI 代理能够直接读取 Figma 设计文件中的图层、样式、布局等结构化数据,并能以编程方式修改设计,例如调整元素属性、生成代码。该工具解决了设计师与开发者之间协作效率低、设计到代码转换繁琐的痛点,使 AI 能理解设计意图并辅助生成更精准的前端代码。核心能力包括:读取 Figma 文件节点树、获取组件和样式信息、执行设计变更操作,以及将设计数据转化为可用的代码片段。它支持多种主流 AI 编码环境,让开发者能在熟悉的工具中直接调用 Figma 资源,实现设计驱动的自动化开发流程。

开源 free 开源模型
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 7032
维护状态 维护中
是否开源 是
定价模式 free

项目数据

分类开源模型
开发团队grab
所属国家
定价模式free
价格说明开源项目,MIT许可证,完全免费,可自行部署使用。
访问状态
是否开源是
开源协议MIT
主要语言JavaScript
技术栈/模型agent,agentic,agentic-ai,ai,ai-agents,automation,claude-code,codex,cursor,design,figma,generative-ai,llm,llms,mcp,model-context-protocol
GitHub 星标★ 7032
30天Star增速
HF 下载量
上线时间2025-03-16 00:00:00
最近更新2026-09-22 00:00:00
维护状态维护中
中文支持
访问方式
移动端支持
综合评分
收录时间2026-08-09
浏览次数2

使用教程

难度:进阶 约 15 分钟 部署方式:本地安装 6 步

环境要求

  • 已安装 Bun 运行环境(README 用 Bun 执行 setup 与 socket)
  • 本地已获取项目代码,并知道仓库所在路径(用于配置 MCP 的 server.ts 路径)
  • 已安装 Cursor 或 Claude Code 等支持 MCP 的 AI 编码客户端
  • 拥有 Figma 账号,可安装并运行 Cursor MCP Plugin
  • 可用浏览器打开 Figma 社区插件页面

安装与启动步骤

  1. 1安装 Bun

    在终端执行官方安装脚本,安装完成后可能需要重开终端使 bun 命令生效。

    curl -fsSL https://bun.sh/install | bash
  2. 2运行项目初始化

    在项目目录下执行 bun setup,它同时会把 MCP 安装到你当前活跃的 Cursor 项目中。

    bun setup
  3. 3启动 WebSocket 服务

    该服务负责在 MCP 服务器与 Figma 插件之间转发消息,需保持运行不要关闭终端。

    bun socket
  4. 4安装 Figma 插件

    从 Figma 社区页面安装 Cursor Talk To Figma MCP 插件,或参考 README 的 Figma plugin 章节本地安装。

  5. 5配置本地开发 MCP

    如需本地开发,把 MCP 配置指向本仓库的 server.ts 绝对路径,替换 /path-to-repo。

    {
      "mcpServers": {
        "TalkToFigma": {
          "command": "bun",
          "args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
        }
      }
    }
  6. 6连接 Figma 与 AI

    在 Figma 中运行 Cursor MCP Plugin,用 join_channel 加入频道连上 WebSocket,再用 Cursor 调用 MCP 工具。

关键配置

配置项必填说明示例
mcpServers.TalkToFigma.command是指定启动 MCP 服务器使用的可执行程序bun
mcpServers.TalkToFigma.args是指向项目内 MCP server.ts 的绝对路径["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
join_channel是Figma 插件侧加入频道,建立与 WebSocket 服务的连接join_channel

如何确认成功

bun socket 终端保持运行无报错,且 Figma 插件通过 join_channel 成功加入频道,即可在 Cursor 中调用 MCP 工具与 Figma 通信。

常见问题

Q:提示找不到 bun 命令怎么办?

A:先执行 curl -fsSL https://bun.sh/install | bash 安装 Bun,安装后重开终端或重新加载 shell 配置再试。

Q:如何让 MCP 指向我本地的开发目录?

A:按 README 的 Local Development Setup,把 mcp 配置里的 args 改为本仓库 src/talk_to_figma_mcp/server.ts 的绝对路径。

Q:Figma 插件从哪里安装?

A:可从 Figma 社区页面安装 Cursor Talk To Figma MCP Plugin,或按 README 的 Figma plugin 章节在本地安装。

Q:整体使用流程是怎样的?

A:依次是启动 WebSocket 服务、在 Cursor 安装 MCP 服务器、打开 Figma 运行插件、用 join_channel 加入频道,最后在 Cursor 里调用 MCP 工具操作 Figma。

注意事项

  • bun socket 启动的 WebSocket 服务需要全程保持运行,否则 Figma 插件无法与 AI 通信。
  • bun setup 会把 MCP 安装到 Cursor 当前活跃项目中,请确认 Cursor 打开的是目标项目。
  • README 中的 Manual Setup and Installation 章节未给出具体内容,本地开发请以 Local Development Setup 的 mcp 配置为准。

核心亮点

  • 原生支持 Cursor、Claude Code、Codex 等多个 AI 编码工具,接入即用
  • 双向操作:既能读取设计数据,也能程序化修改设计,覆盖设计协作全流程
  • 基于 MCP 标准协议,架构清晰,易于扩展和集成到现有 AI 工作流

不足之处

  • 文档/社区待观察
  • 依赖 Figma API 权限,复杂设计文件可能响应较慢

适用场景

  • 前端开发中,AI 根据 Figma 设计稿自动生成页面代码
  • 设计师与开发者协作时,AI 辅助同步设计变更到代码
  • 自动化测试中,AI 读取设计规范校验 UI 实现一致性

替代项目

Figma MCP Server、Figma to Code (Anima)、Builder.io

项目介绍

cursor-talk-to-figma-mcp 是智能体领域的开源项目,由 grab 开发,2025 年首次发布。

在全站 13,014 个收录项目中,它的 GitHub 星标数(7,032)位列前 7%,在智能体分类的 2,499 个项目里位列前 7%。

近 41 天,它的 GitHub 星标从 6,965 增加到 7,032,净增 67。

项目仍在小幅维护中,最近一次代码更新于 2026-09-22。MIT许可证,完全免费,可自行部署使用。

它主要面向的使用场景是:前端开发中,AI根据Figma设计稿自动生成页面代码。同类可对比的替代方案包括 Figma MCP Server、Figma to Code (Anima)、Builder.io。

上一篇:osaurus

下一篇:AppAgent

同类项目推荐

xinchao-dynamic-mind 开源

给 AI 装上疲惫和欲望,让交互更真实

独立、可自托管的 AI 动态心智状态引擎:驱动力、念头池、疲惫、睡眠与意图。

★ 199 2026-08-09
deepseek-harness 开源

把 AI 能力拆成乐高积木,拼出你的专属智能体。

DeepSeek Harness: Everything is a Plugin.

★ 233327 2026-08-15
AutoGPT 开源

开箱即用的 AI 员工,交代任务就自己干完

AutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mis···

★ 187492 2026-08-09
EvoAgentX 开源

让 AI 智能体自己迭代变强,越用越聪明

EvoAgentX: Building a Self-Evolving Ecosystem of AI Agents

★ 3351 2026-09-12