AI导哈

Figma设计自动化工具

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

  • by AIYA861202
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 AIYA861202/figma-mcp

使用说明

Cursor 与 Figma MCP 进行对话

该项目实现了Cursor AI与Figma之间的模型上下文协议（MCP）集成，使Cursor能够与Figma进行通信，以读取设计并对其进行程序化修改。

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c（该链接翻译为中文时，由于其本质是一个网址，直接保留原样即可，无需翻译。但若需说明其内容或用途，可表述为：“这是一个GitHub用户附件资源的链接，指向一个特定的资产（文件或资源）。”）

项目结构

  • 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. 运行安装程序，这也将把MCP安装到您当前光标所在的项目中
bun setup
  1. 启动Websocket服务器
bun socket
  1. MCP服务器
bunx cursor-talk-to-figma-mcp
  1. 安装 Figma 插件

快速视频教程

设计自动化示例

批量文本内容替换

多亏了 @dusskapark 为贡献了大量文本替换功能，特此致谢。以下是 演示视频。

手动设置和安装

MCP服务器：与Cursor的集成

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

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

WebSocket 服务器

启动WebSocket服务器：

bun socket

Figma 插件

  1. 在Figma中，前往插件 > 开发 > 新建插件
  2. 选择“链接现有插件”
  3. 选择 src/cursor_mcp_plugin/manifest.json 文件
  4. 现在，该插件应该已在您的Figma开发插件中可用

Windows + WSL 指南

  1. 通过 PowerShell 安装 bun
powershell -c "irm bun.sh/install.ps1|iex"
  1. 取消对主机名的注释 0.0.0.0 在 src/socket.ts
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",
  1. 启动 WebSocket
bun socket

使用

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

MCP 工具

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

文件与选择

  • get_document_info - 获取当前Figma文档的信息
  • get_selection - 获取当前选择的信息
  • read_my_design - 获取当前选择项的详细节点信息，无需参数
  • get_node_info - 获取特定节点的详细信息
  • get_nodes_info - 通过提供节点ID数组，获取多个节点的详细信息

注释

  • get_annotations - 获取当前文档或特定节点中的所有注释
  • set_annotation - 创建或更新一个支持Markdown的注释
  • set_multiple_annotations - 批量高效创建/更新多个注释
  • scan_nodes_by_types - 扫描具有特定类型的节点（有助于找到注释目标）

创建元素

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

修改文本内容

  • scan_text_nodes - 对大型设计使用智能分块技术扫描文本节点
  • set_text_content - 设置单个文本节点的文本内容
  • set_multiple_text_contents - 高效批量更新多个文本节点

造型设计

  • set_fill_color - 设置节点的填充颜色（RGBA）
  • set_stroke_color - 设置节点的描边颜色和粗细
  • set_corner_radius - 设置节点的角半径，可选择性地控制每个角

布局与组织

  • move_node - 将节点移动到新位置
  • resize_node - 使用新尺寸调整节点大小
  • delete_node - 删除一个节点
  • delete_multiple_nodes - 高效地一次性删除多个节点
  • clone_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. 适当处理错误，因为所有命令都可能抛出异常
  8. 对于大型设计：
    • 使用分块参数在 scan_text_nodes
    • 通过WebSocket更新监控进度
    • 实施适当错误处理
  9. 对于文本操作：
    • 尽可能使用批处理操作
    • 考虑结构关系
    • 通过针对性导出验证更改
  10. 对于转换旧版注释：
    • 扫描文本节点以识别编号标记和描述
    • 使用 scan_nodes_by_types 查找注释所引用的UI元素
    • 使用路径、名称或邻近关系将标记与其目标元素匹配
    • 对注释进行适当分类 get_annotations
    • 使用（某工具/方法）创建本地注解 set_multiple_annotations 成批地；分批地
    • 验证所有注解是否正确链接到其目标
    • 成功转换后删除旧版注解节点

许可证

麻省理工学院（MIT）

相关 MCP