AI导哈

Figma MCP集成工具

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

  • by grab
  • JavaScript
  • 本地部署
  • 7077 星标
  • 更新于
在 GitHub 查看 sonnylazuardi/cursor-talk-to-figma-mcp

使用说明

与Figma MCP交谈

该项目实现了AI代理（Cursor，Claude）和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/ -用于与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 socket
  1. 新 从安装Figma插件 Figma社区页面 或 本地安装

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

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

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

开发设置

要进行开发，请更新您的mcp配置以直接指向您的本地目录。

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

手动设置和安装

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

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 -创建具有可自定义字体属性的新文本节点

修改文本内容

  • 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 -使用可选的每个角控件设置节点的角半径

布局和组织

  • move_node -将节点移动到新位置
  • resize_node -使用新尺寸调整节点大小
  • 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 对于文本元素
  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