AI导哈

Figma设计自动化工具

通过Model Context Protocol (MCP)实现Cursor AI与Figma的集成，支持编程方式读取和修改Figma设计。

  • by yhc984
  • TypeScript
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 yhc984/cursor-talk-to-figma-mcp-main

使用说明

光标与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

  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. 正确处理错误，因为所有命令都可能引发异常

许可证

麻省理工学院

相关 MCP