AI导哈

Figma MCP集成工具

实现AI IDE与Figma之间的模型上下文协议（MCP）集成，支持程序化读取和修改设计文件。

  • by GEON1999
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 GEON1999/cursor-talk-to-figma-mcp-local

使用说明

手柄Figma MCP

该项目实现了AI IDE（如Cursor、Antigravity、Windsurf等）和Figma之间的模型上下文协议（MCP）集成。它允许您的AI助手与Figma通信，以读取设计并以编程方式修改它们。

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

项目结构

  • src/talk_to_figma_mcp/ -用于Figma集成的TypeScript MCP服务器
  • src/cursor_mcp_plugin/ -用于与AI IDE通信的Figma插件
  • src/socket.ts -（遗留）独立WebSocket服务器（现在嵌入MCP服务器中）

开始（推荐）

使用此MCP服务器的最简单方法是直接通过 npx。这可确保您始终拥有最新版本，而无需在本地下载或管理文件。

  1. 添加到AI IDE的MCP配置 转到IDE的MCP设置（例如，光标设置>MCP），并使用以下配置添加新服务器：

    {
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["-y", "handle-figma-mcp@latest"]
    }
  }
}

    （注意：当IDE运行此命令时，嵌入式WebSocket服务器将自动启动！）

    故障排除：Mac Homebrew PATH问题 如果您的AI IDE（例如Cursor）找不到 npx，您可能需要提供绝对路径并注入path环境变量。 （注：以下路径是Apple Silicon Mac的示例。Intel Mac通常使用 /usr/local/bin/npx。如果不同，请替换为实际路径。)

    {
  "mcpServers": {
    "TalkToFigma": {
      "command": "/opt/homebrew/bin/npx",
      "args": ["-y", "handle-figma-mcp@latest"],
      "env": {
        "PATH": "/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
      }
    }
  }
}

  2. 安装Figma插件 下载全部 cursor_mcp_plugin 文件夹来自 GitHub. 然后，在Figma中，转到 插件>开发>从清单导入插件。.. 并选择 manifest.json 文件位于您下载的文件夹中。

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

多亏了 @杜斯卡帕克 用于贡献批量文本替换功能。这是 演示视频.

实例覆盖传播 另一项贡献来自 @杜斯卡帕克 使用单个命令将组件实例重写从源实例传播到多个目标实例。使用需要类似自定义的组件实例时，此功能大大减少了重复的设计工作。查看我们的 演示视频.

地方发展（供贡献者使用）

如果你想修改代码或为项目做出贡献：

  1. 如果您还没有安装Bun：
curl -fsSL https://bun.sh/install | bash
  1. 运行安装程序：
bun setup
  1. 更新AI IDE的MCP配置以运行本地入口点：
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "node",
      "args": ["/absolute/path/to/cursor-talk-to-figma-mcp/dist/server.js"]
    }
  }
}
  1. 在Figma中加载本地插件： 转到插件>开发>新插件>“链接现有插件”，然后选择 src/cursor_mcp_plugin/manifest.json.

MCP工具

MCP服务器提供以下工具用于与Figma交互：

文件和选择

  • get_document_info -获取有关当前Figma文档的信息
  • get_selection -获取当前选择的相关信息
  • read_my_design -获取当前选择的详细节点信息，不带参数
  • get_node_info -获取特定节点的详细信息
  • get_nodes_info -通过提供节点ID数组获取有关多个节点的详细信息
  • set_focus -通过选择特定节点并滚动视口来将焦点设置在该节点上
  • set_selections -将选择设置为多个节点并滚动视口以显示它们

注释

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

原型制作和连接

  • get_reactions -通过视觉高亮动画从节点获取所有原型反应
  • set_default_connector -将复制的FigJam连接器设置为创建连接的默认连接器样式（必须在创建连接之前设置）
  • create_connections -基于原型流或自定义映射在节点之间创建FigJam连接线

创建元素

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

修改文本内容

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

自动布局和间距

  • set_layout_mode -设置框架的布局模式和环绕行为（无、水平、垂直）
  • set_padding -为自动布局框架设置填充值（顶部、右侧、底部、左侧）
  • set_axis_align -为自动布局框架设置主轴和反轴对齐
  • set_layout_sizing -为自动布局框架设置水平和垂直尺寸模式（固定、夹紧、填充）
  • set_item_spacing -在自动布局框架中设置子项之间的距离

样式

  • set_fill_color -设置节点的填充颜色（RGBA）
  • set_stroke_color -设置节点的笔划颜色和权重
  • set_corner_radius -使用可选的每个角控件设置节点的角半径
  • create_paint_style -在Figma中创建新的颜色样式（绘画样式）。使用文件夹符号进行分组
  • create_multiple_paint_styles -在Figma中一次创建多种颜色样式（绘画样式）
  • apply_paint_style -将现有的颜色样式（绘制样式）应用于节点的填充
  • rename_paint_style -重命名现有的绘制样式
  • swap_style -查找特定油漆样式的所有用法，并用另一种样式替换它们
  • create_color_variable -创建或更新单个Figma颜色变量
  • create_multiple_color_variables -一次创建或更新多个Figma颜色变量

布局和组织

  • move_node -将节点移动到新位置
  • resize_node -使用新尺寸调整节点大小
  • rename_node -重命名Figma中的节点
  • delete_node -删除节点
  • delete_multiple_nodes -一次高效删除多个节点
  • clone_node -创建具有可选位置偏移的现有节点的副本

组件和样式

  • get_styles -获取有关当地风格的信息
  • get_local_components -获取有关本地组件的信息
  • create_component_instance -创建组件的实例
  • get_instance_overrides -从选定的组件实例中提取替代属性
  • set_instance_overrides -将提取的覆盖应用于目标实例

导出和高级

  • export_node_as_image -将节点导出为图像（PNG、JPG、SVG或PDF）-对当前以文本形式返回base64的图像的支持有限

连接管理

  • join_channel -加入特定渠道与Figma沟通

MCP提示

MCP服务器包括几个帮助提示，以指导您完成复杂的设计任务：

  • design_strategy -使用Figma设计的最佳实践
  • read_design_strategy -阅读Figma设计的最佳实践
  • text_replacement_strategy -Figma设计中文本替换的系统方法
  • annotation_conversion_strategy -将手动注释转换为Figma原生注释的策略
  • swap_overrides_instances -Figma中组件实例之间转移覆盖的策略
  • reaction_to_connector_strategy -使用“get_actions”的输出将Figma原型反应转换为连接线，并按顺序指导使用“create_connections”的策略

发展

构建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 对于文本元素
    • create_polygon 用于多边形形状
  5. 使用验证更改 get_node_info
  6. 尽可能使用组件实例以保持一致性
  7. 正确处理错误，因为所有命令都可能引发异常
  8. 对于大型设计：
    • 在中使用分块参数 scan_text_nodes
    • 通过WebSocket更新监控进度
    • 实施适当的错误处理
  9. 对于文本操作：
    • 尽可能使用批处理操作
    • 考虑结构关系
    • 验证目标导出的更改
  10. 要转换旧注释，请执行以下操作：
    • 扫描文本节点以识别编号的标记和描述
    • 使用 scan_nodes_by_types 查找注释所引用的UI元素
    • 使用路径、名称或接近度将标记与其目标元素匹配
    • 对注释进行适当的分类 get_annotations
    • 使用创建本机注释 set_multiple_annotations 分批
    • 验证所有注释是否正确链接到其目标
    • 成功转换后删除旧注释节点
  11. 将原型面条可视化为FigJam连接器：
    • 使用 get_reactions 为了提取原型流，
    • 使用以下命令设置默认连接器 set_default_connector,
    • 并生成连接线 create_connections 以获得清晰的视觉流图。

许可证

麻省理工学院

相关 MCP