使用Cursor读取并修改Figma设计稿的MCP服务-首席AI分享圈

🚀邀请体验：中国首家 AI IDE 智能编程软件 Trae 中文版下载，不限量使用 DeepSeek-R1 和 Doubao-pro!

综合介绍

Cursor Talk to Figma MCP 是一个开源项目，通过 Model Context Protocol (MCP) 协议连接 AI 编程工具 Cursor 和设计软件 Figma。它由开发者 Sonny Lazuardi 创建，托管在 GitHub 上，发布时间为2025年3月17日。这个工具的核心功能是让 Cursor 读取 Figma 设计文件并生成代码，或者直接修改设计内容。它使用 TypeScript 编写，结合 WebSocket 技术实现实时通信。无论是快速将设计转为代码，还是用 AI 操作设计文件，这个免费工具都能帮助开发者提高效率。任何人都可以下载代码并参与开发。

bolt.new 前几天上线的新功能：一键将Figma设计转换为全栈应用

连接Cursor和Figma设计稿的MCP服务-1

功能列表

连接 Cursor 和 Figma：通过 MCP 协议和 WebSocket 实现双向通信。
读取设计信息：获取 Figma 文件的文档概况、选中内容或具体节点的详细信息。
创建设计元素：在 Figma 中添加矩形、框架或文字节点。
修改样式和布局：调整颜色、边框、圆角，或者移动、调整大小、删除节点。
生成代码：将 Figma 设计转为可用的代码，减少手动编写时间。
支持组件管理：读取本地或团队组件，创建组件实例。
导出功能：将设计节点导出为 PNG、JPG、SVG 或 PDF 格式。
开源免费：代码公开，开发者可自由修改或优化。

使用帮助

安装流程

要使用 Cursor Talk to Figma MCP，需要安装并配置几个部分。以下是详细步骤：

1. 准备环境

安装 Bun：Bun 是一个快速运行 JavaScript 的工具。如果没安装，打开终端输入：

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

安装 Cursor：从官网（cursor.ai）下载并安装 Cursor AI 编程工具。
获取 Figma 令牌：登录 Figma，在账户设置中生成“个人访问令牌”（Personal Access Token），保存好备用。

2. 下载项目

在终端运行以下命令，下载项目代码：

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

cd cursor-talk-to-figma-mcp

3. 安装依赖并设置

bun setup

这会安装所有依赖（包括 TypeScript 和 WebSocket 库），并自动在 Cursor 中配置 MCP 服务器。

4. 启动 WebSocket 服务器

在终端输入：

bun start

或者手动运行：

bun run src/socket.ts

这会启动 WebSocket 服务器，用于连接 Figma 插件和 MCP。

5. 安装 Figma 插件

打开 Figma 桌面应用。
点击顶部菜单“插件” > “开发” > “新建插件”。
选择“链接现有插件”，然后找到项目文件夹中的 src/cursor_mcp_plugin/manifest.json 文件。
确认后，插件会出现在 Figma 的开发插件列表中。

6. 配置 Cursor MCP 服务器（手动方式）

如果 bun setup 未自动完成，可以手动配置。
打开 ~/.cursor/mcp.json 文件，添加以下内容：

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

替换 /path/to/ 为你的项目实际路径。

如何使用主要功能

安装完成后，按照以下步骤操作：

启动工具

运行 WebSocket 服务器：
- 在终端输入 bun start，确保服务器运行。
启动 Figma 插件：
- 在 Figma 中，右键点击画布，选择“插件” > “开发” > 运行刚安装的插件。
- 插件启动后，输入 join_channel 加入通信频道。
连接 Cursor：
- 打开 Cursor，确保 MCP 服务器已配置并运行。

读取设计信息

在 Figma 中打开一个设计文件，选中需要操作的部分。
在 Cursor 的“Composer”模式中输入指令，例如：
- “获取当前文档信息”：调用 get_document_info。
- “查看选中内容”：调用 get_selection。
Cursor 会通过 MCP 返回设计数据，比如布局、样式等。

创建和修改设计

在 Cursor 中输入具体指令：
- 创建矩形：create_rectangle，指定位置和大小。
- 添加文字：create_text，设置内容和字体。
- 修改颜色：set_fill_color，输入 RGBA 值。
修改会实时反映在 Figma 文件中。

生成代码

在 Cursor 中粘贴 Figma 文件链接（例如 https://www.figma.com/file/xxx/yyy）。
输入指令：“生成这个设计的 React 代码”。
Cursor 会读取设计，输出对应的代码。

导出设计

在 Cursor 中输入：export_node_as_image，选择格式（PNG、JPG 等）。
导出文件会保存到本地。

操作注意事项

连接顺序：先启动 WebSocket，再运行插件，最后用 Cursor 发送指令。
错误处理：如果指令失败，检查终端日志，确认网络和权限是否正常。
性能提示：处理大文件时，先用 get_document_info 查看概况，再操作具体节点。

这个工具的强大之处在于它让设计和编码无缝衔接。你可以用 AI 直接操作 Figma，或者快速生成代码，省去大量重复工作。

应用场景

快速原型开发
场景描述：产品经理需要验证一个设计想法。他们可以用 Cursor 在 Figma 中创建元素，然后导出代码，快速生成可交互原型。
设计与开发同步
场景描述：设计师调整 Figma 文件后，开发者通过 Cursor 读取最新设计，实时更新代码，减少沟通成本。
自动化样式调整
场景描述：团队需要批量修改设计颜色或布局。开发者可以用 Cursor 输入指令，自动完成调整。

QA

这个工具需要付费吗？
答案：不需要。它是开源项目，免费使用，代码在 GitHub 上公开。
支持哪些编程语言输出？
答案：依赖 Cursor 的能力，目前支持 React、HTML、CSS 等常见前端代码，具体由 Cursor 的生成逻辑决定。
可以同时操作多个 Figma 文件吗？
答案：可以，但需要为每个文件加入不同的频道（用 join_channel），确保指令指向正确文件。