Talk to Figma MCP

光标与Figma MCP对话

该项目实现了Cursor AI和Figma之间的模型上下文协议（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 -WebSocket服务器，促进MCP服务器和Figma插件之间的通信

开始使用

1. 如果您还没有安装Bun：

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

1. 运行安装程序，这也将在Cursor的活动项目中安装MCP

bun setup

1. 启动Websocket服务器

bun start

1. 安装 Figma插件

手动设置和安装

MCP服务器：与Cursor集成

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

{
  "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并运行光标MCP插件
4. 通过使用以下命令加入通道，将插件连接到WebSocket服务器 join_channel
5. 使用MCP工具使用Cursor与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

1. 编辑code.js和ui.html

最佳实践

使用Figma MCP时：

1. 发送命令前始终加入频道
2. 使用获取文档概述 get_document_info 第一
3. 检查当前选择 get_selection 修改前
4. 根据需要使用适当的创建工具：

- create_frame 用于集装箱 - create_rectangle 用于基本形状 - create_text 对于文本元素

1. 使用验证更改 get_node_info
2. 尽可能使用组件实例以保持一致性
3. 正确处理错误，因为所有命令都可能引发异常

许可证

麻省理工学院