项目简介

本MCP服务器（Model Context Protocol Server）充当 Cursor AI 和 Figma 之间的桥梁，允许用户使用 Cursor 编辑器通过自然语言指令与 Figma 设计文件进行交互。它通过 WebSocket 与 Figma 插件通信，并将 Cursor 的 MCP 请求转换为 Figma API 调用，实现对 Figma 设计的读取和修改。

主要功能点

读取 Figma 设计信息：获取 Figma 文档、选区和节点（图层）的详细信息。
创建 Figma 元素：支持创建矩形、框架和文本元素，并可设置基本属性。
修改 Figma 元素样式：允许设置节点的填充颜色、描边颜色和圆角半径。
布局和组织：支持移动、调整大小和删除 Figma 节点。
组件和样式：可以获取文档样式、本地组件以及创建组件实例。
导出功能：支持将 Figma 节点导出为图片。

安装步骤

安装 Bun: 根据仓库 README 的指引，在 Windows 系统上安装 Bun JavaScript 运行时环境。

powershell -Command "iwr bun.sh/install.ps1 -useb | iex"

安装完成后，重启终端。

克隆仓库: 使用 Git 克隆此 GitHub 仓库到本地。

git clone https://github.com/puryadianati/convert-figma-code-cursor.git
cd convert-figma-code-cursor

安装依赖: 在项目根目录下运行 Bun 命令安装项目依赖。
```
bun install
```

服务器配置

为了让 Cursor AI 能够连接到此 MCP 服务器，需要在你的项目根目录下的 '.cursor/mcp.json' 文件中添加服务器配置信息。如果 '.cursor' 文件夹不存在，请先创建。

创建 '.cursor/mcp.json' 文件，并填入以下内容：

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "C:/Users/purya/Desktop/convert-figma-code-cursor/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

配置参数说明:

server name: 'TalkToFigma' - 服务器名称，在 Cursor 中使用 'mcp_TalkToFigma_工具名' 的形式调用工具。
command: 'bun' - 启动服务器的命令，这里使用 Bun 运行时环境。
args: '["C:/Users/purya/Desktop/convert-figma-code-cursor/src/talk_to_figma_mcp/server.ts"]' - 启动命令的参数，指向服务器入口文件 'server.ts' 的绝对路径。请务必将路径 'C:/Users/purya/Desktop/convert-figma-code-cursor' 替换为你本地仓库的实际路径。

基本使用方法

启动 WebSocket 服务器: 在项目根目录下运行以下命令启动 WebSocket 服务器，该服务器负责 MCP 服务器和 Figma 插件之间的通信。
```
bun start
```
安装和运行 Figma 插件:
- 打开 Figma 桌面应用程序。
- 进入 "Plugins" -> "Development" -> "New Plugin..."。
- 选择 "Link existing plugin..." 并选择项目目录下的 'src/cursor_mcp_plugin/manifest.json' 文件。
- 在 Figma 中打开你的设计文档，然后在 "Development" 插件菜单中找到并运行 "Cursor MCP Plugin"。
在 Cursor 中与 Figma 交互: 在 Cursor 编辑器中，你可以使用以下命令与 Figma 进行交互（以 'mcp_TalkToFigma_' 为前缀）：
- 'mcp_TalkToFigma_join_channel': 连接到 Figma 插件，建立通信通道。
- 'mcp_TalkToFigma_get_document_info': 获取当前 Figma 文档的信息。
- 'mcp_TalkToFigma_create_rectangle': 在 Figma 中创建一个新的矩形。
- 'mcp_TalkToFigma_set_fill_color': 设置 Figma 节点的填充颜色。
- ...以及其他可用的 MCP 工具 (详见仓库 README)。
你可以通过自然语言指令，结合这些 MCP 工具，让 Cursor AI 帮你操作 Figma 设计。例如，你可以尝试在 Cursor 中输入 “在Figma中创建一个红色的矩形” 这样的指令，看看效果。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息