项目简介

Cursor Talk to Figma MCP 是一个基于 Model Context Protocol 的服务器，旨在桥接代码编辑器 Cursor 和设计工具 Figma。通过这个服务器，用户可以在 Cursor 中使用自然语言指令，直接与 Figma 文件进行交互，实现设计稿的信息获取、元素创建和属性修改等功能。它扩展了 Cursor 的能力，使得开发者可以通过更自然的方式操控 Figma，提高设计和开发协作的效率。

主要功能点

信息获取：
- 获取 Figma 文档的详细信息，例如文档名称、页面结构等。
- 获取当前 Figma 文件中的选中节点信息。
- 获取指定节点的详细属性，如位置、尺寸、填充、描边等。
- 获取 Figma 文件中定义的样式和组件信息。
- 获取 Figma 变量和变量集合信息，支持筛选特定类型的变量。
元素创建与修改：
- 在 Figma 中创建矩形、框架和文本元素，并可指定位置、尺寸和名称。
- 设置节点的填充颜色、描边颜色、描边粗细和圆角半径。
- 移动和调整节点的大小。
- 删除 Figma 节点。
- 设置文本节点的文本内容和样式。
- 创建组件实例并设置实例属性。
高级功能：
- 将 Figma 节点导出为图片（PNG, JPG, SVG, PDF 格式）。
- 支持 Figma 变量的管理，包括创建变量集合和变量，以及将变量绑定到节点属性，实现设计 tokens 的联动。
- 提供设计策略 Prompt，为用户提供 Figma 设计的最佳实践指导。

安装步骤

安装 Bun：如果您的系统尚未安装 Bun，请先安装 Bun。打开终端并执行命令：

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

运行 Setup：在终端中，导航到您克隆的 'cursortofigma' 仓库目录，并执行以下命令：
```
bun setup
```
这个命令会自动安装 MCP 服务器到您的 Cursor 项目中。
启动 WebSocket 服务器：在仓库根目录下，执行以下命令启动 WebSocket 服务器：
```
bun start
```
安装 Figma 插件：
- 在 Figma 中，点击菜单 "Plugins" -> "Development" -> "New Plugin"。
- 选择 "Link existing plugin"。
- 在文件选择框中，选择仓库目录下的 'src/cursor_mcp_plugin/manifest.json' 文件。
- Figma 插件 "Cursor MCP Plugin" 将会安装到您的开发插件列表中。

服务器配置 (Cursor MCP 客户端)

要将此 MCP 服务器配置到 Cursor 中，您需要编辑 Cursor 的 MCP 配置文件 '~/.cursor/mcp.json'。添加一个新的服务器配置，内容如下：

{
  "mcpServers": {
    "TalkToFigma": {  // 服务器名称，在 Cursor 中使用 @TalkToFigma/工具名 调用
      "command": "bun", // 启动服务器的命令，这里使用 bun 运行时
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts" // 服务器脚本的路径，请替换为实际路径
      ]
    }
  }
}

注意：请将 '/path/to/cursor-talk-to-figma-mcp' 替换为您本地 'cursortofigma' 仓库的实际路径。

基本使用方法

确保 WebSocket 服务器已启动 ('bun start')。
确保已在 Cursor 中配置并启用了 "TalkToFigma" MCP 服务器。
打开 Figma，运行已安装的 "Cursor MCP Plugin" (在 Figma 插件开发列表中)。
在 Cursor 编辑器中，您可以使用 '@TalkToFigma/工具名' 的格式来调用 Figma 的各种功能。例如：
- '@TalkToFigma/get_document_info' 获取当前 Figma 文档信息。
- '@TalkToFigma/create_rectangle x=100 y=100 width=200 height=150 name="My Rectangle"' 创建一个矩形。
- '@TalkToFigma/set_fill_color nodeId="<节点ID>" r=0.8 g=0.2 b=0.2' 设置节点的填充颜色。
- 使用 '@TalkToFigma/join_channel' 命令可以加入指定的频道，插件默认连接到 'default' 频道。

更多工具和使用方法，请参考仓库的 README 文档和 'src/talk_to_figma_mcp/server.ts' 文件中定义的工具。

关键词

项目简介

主要功能点

安装步骤

服务器配置 (Cursor MCP 客户端)

基本使用方法

信息