Cursor 与 Figma 的 MCP 集成

该项目实现了Cursor AI与Figma之间的Model Context Protocol (MCP)集成，使Cursor能够与Figma进行通信，以读取设计并对其进行编程修改。

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

项目结构

• src/talk_to_figma_mcp/ - 用于Figma集成的TypeScript MCP服务器
• src/cursor_mcp_plugin/ - 用于与Cursor通信的Figma插件
• src/socket.ts - 促进MCP服务器与Figma插件之间通信的WebSocket服务器

快速开始

1. 如果尚未安装Bun，请执行以下命令进行安装：

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

2. 运行设置脚本，这也会在你的Cursor活动项目中安装MCP

bun setup

3. 启动Websocket服务器

bun start

4. 安装Figma插件

手动设置和安装

MCP服务器：与Cursor的集成

在~/.cursor/mcp.json中将服务器添加到Cursor MCP配置中：

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

WebSocket服务器

启动WebSocket服务器：

bun run src/socket.ts

Figma插件

1. 在Figma中，转到插件 > 开发 > 新插件
2. 选择“链接现有插件”
3. 选择src/cursor_mcp_plugin/manifest.json文件
4. 插件现在应该可以在你的Figma开发插件中找到

使用方法

1. 启动WebSocket服务器
2. 在Cursor中安装MCP服务器
3. 打开Figma并运行Cursor MCP插件
4. 使用join_channel加入一个频道来连接插件和WebSocket服务器
5. 使用Cursor通过MCP工具与Figma进行通信

MCP工具

MCP服务器提供了以下工具与Figma进行交互：

文档及选区

• get_document_info - 获取当前Figma文档的信息
• get_selection - 获取当前选区的信息
• get_node_info - 获取特定节点的详细信息

创建元素

• create_rectangle - 创建一个新的矩形，包括位置、大小和可选名称
• create_frame - 创建一个新的框架，包括位置、大小和可选名称
• create_text - 创建一个新的文本节点，具有可定制的字体属性

样式

• set_fill_color - 设置节点的填充颜色（RGBA）
• set_stroke_color - 设置节点的描边颜色和权重
• set_corner_radius - 设置节点的圆角半径，可选每个角的控制

布局与组织

• move_node - 将节点移动到新位置
• resize_node - 调整节点的新尺寸
• delete_node - 删除节点

组件与样式

• get_styles - 获取本地样式的信息
• get_local_components - 获取本地组件的信息
• get_team_components - 获取团队组件的信息
• create_component_instance - 创建组件实例

导出与高级

• export_node_as_image - 将节点导出为图像（PNG、JPG、SVG或PDF）
• execute_figma_code - 在Figma中执行任意JavaScript代码（谨慎使用）

连接管理

• join_channel - 加入特定频道以与Figma进行通信

开发

构建Figma插件

1. 导航至Figma插件目录：

   cd src/cursor_mcp_plugin
   

2. 编辑code.js和ui.html

最佳实践

在使用Figma MCP时：

1. 发送命令之前始终加入一个频道
2. 首先使用get_document_info获取文档概览
3. 修改前使用get_selection检查当前选区
4. 根据需要使用适当的创建工具：
   • create_frame用于容器
   • create_rectangle用于基本形状
   • create_text用于文本元素
5. 使用get_node_info验证更改
6. 尽可能使用组件实例以保持一致性
7. 正确处理错误，因为所有命令都可能抛出异常

许可证

MIT