AI导哈

Figma AI集成工具

MCP Figma是一个实现AI编程助手（如Cursor、GitHub Copilot等）与Figma集成的工具，允许通过编程方式读取和修改设计。

  • by YelowFlash09
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 YelowFlash09/figma_mcp

使用说明

MCP图

该项目实现了AI编码助手（Cursor、GitHub Copilot、Windsurf）和Figma之间的模型上下文协议（MCP）集成，允许AI助手与Figma通信，以读取设计并以编程方式对其进行修改。

AI助手兼容性

此MCP服务器可与所有主要的AI驱动的编码助手配合使用：

  • ✅ 光标 -通过代理模式完全支持MCP
  • ✅ GitHub Copilot （VS Code、JetBrains、Eclipse、Xcode）-原生MCP支持
  • ✅ 帆板运动 -内置MCP与Cascade代理集成
  • ✅ 克劳德桌面版 -Anthropic的旗舰MCP客户
  • ✅ VS Code 使用GitHub Copilot扩展
  • ✅ 泽德 -早期MCP采用者
  • ✅ 尼奥夫 -通过MCP插件

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

项目结构

  • src/talk_to_figma_mcp/ -用于Figma集成的TypeScript MCP服务器
  • src/mcp_plugin/ -Figma插件，用于与AI助手（Cursor、GitHub Copilot、Windsurf、Claude Desktop等）进行通信
  • src/socket.ts -WebSocket服务器，促进MCP服务器和Figma插件之间的通信（由MCP服务器自动启动）

快速设置指南

先决条件

  1. Node.js 版本18或更高版本：
node --version

  1. AI助手 支持MCP（见上面的兼容性列表）

  2. Figma插件 -从以下位置安装 Figma社区页面 或 本地安装

安装

  1. 设置项目（下载依赖项和生成）：
npm run setup
  1. 启动MCP服务器（这也将自动启动WebSocket服务器）：
npx ai-figma-mcp

AI助手配置

GitHub Copilot（VS Code、JetBrains、Eclipse、Xcode）

GitHub Copilot在所有主要IDE中都有原生MCP支持。

Visual Studio Code

方法1：使用VS代码UI（推荐）

  1. 打开命令选项板(Cmd+Shift+P 在macOS上， Ctrl+Shift+P 在Windows/Linux上）
  2. 类型 “MCP:添加服务器” 并选择它
  3. 选择 HTTP (sse) 作为服务器类型
  4. 输入MCP配置：
    {
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}

方法2：手动配置

添加到您的VS代码 settings.json:

{
  "mcp": {
    "servers": {
      "TalkToFigma": {
        "command": "npx",
        "args": ["ai-figma-mcp@latest"]
      }
    }
  }
}

JetBrains集成开发环境

  1. 点击⚙️ 在右下角
  2. 选择“编辑设置”
  3. 在MCP部分下，单击“编辑 mcp.json"
  4. 添加配置：
    {
  "servers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}

日蚀

  1. 打开副驾驶聊天面板（点击状态栏中的副驾驶图标）
  2. 选择“编辑首选项”
  3. 导航到Copilot聊天→ MCP
  4. 添加与上述相同的JSON配置

项目

  1. 打开GitHub Copilot进行Xcode扩展
  2. 在代理模式下，单击工具图标
  3. 选择“编辑配置”
  4. 将配置添加到 mcp.json

光标

Cursor在代理模式下具有出色的MCP支持。

  1. 打开光标设置 (Cmd+, 在macOS上， Ctrl+, 在Windows/Linux上）
  2. 导航到MCP配置
  3. 添加服务器配置：
    {
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
  4. 重新启动游标
  5. 切换到代理模式 在聊天界面中
  6. MCP工具将自动出现 在可用工具列表中

帆板运动

Windsurf的Cascade代理支持原生MCP。

  1. 打开Windsurf设置
  2. 导航到Cascade→ MCP服务器
  3. 点击“添加MCP服务器”
  4. 配置服务器：
    {
  "servers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"]
    }
  }
}
  5. 服务器将出现在您的MCP工具中 在级联模式下

克劳德桌面版

  1. 找到Claude Desktop配置文件：

    • macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
    • 窗户： %APPDATA%/Claude/claude_desktop_config.json

  2. 添加MCP服务器配置：

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

  3. 重新启动克劳德桌面

使用示例

配置后，您可以使用自然语言通过您的AI助手与Figma进行交互：

入门指南

"Join the Figma channel 'vblckgfu' and tell me about the current design"

阅读设计

"What elements are currently selected in Figma?"
"Read the design and describe the layout structure"
"Get information about all text nodes in the current design"

设计分析

"Analyze the current Figma design and suggest improvements"
"What colors are being used in this design?"
"Check if there are any accessibility issues with the text contrast"

设计修改

"Change the background color of the selected frame to blue"
"Update all heading text to use a larger font size"
"Create a new button component with consistent styling"

注释和文件

"Add annotations to explain the design decisions"
"Create documentation for this component library"
"Scan for any missing annotations in the design system"

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

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

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

开发设置

从源头构建

如果你想从源代码构建或为项目做出贡献：

  1. 克隆存储库：
git clone https://github.com/your-repo/ai-figma-mcp.git
cd ai-figma-mcp
  1. 安装依赖项并构建：
npm run setup
  1. 对于本地开发，您可以直接指向已构建的服务器：
{
  "mcpServers": {
    "TalkToFigmaLocal": {
      "command": "node",
      "args": ["/path/to/your/project/dist/talk_to_figma_mcp/server.js"]
    }
  }
}

替换 /path/to/your/project/ 带有此克隆存储库的实际绝对路径。

Figma插件

选项1：来自Figma社区（推荐）

  1. 首选 Figma社区上的MCP Figma插件
  2. 点击“安装”
  3. 该插件将在您的Figma插件菜单中提供

选项2：手动安装（开发）

  1. 在Figma中，转到插件>开发>新插件
  2. 选择“链接现有插件”
  3. 选择 src/mcp_plugin/manifest.json 此项目中的文件。
  4. 该插件现在应该可以在您的Figma开发插件中使用。

用法

  1. 启动MCP服务器：运行 npx ai-figma-mcp 在你的终端。这也会启动WebSocket服务器。
  2. 配置您的AI助手：按照“AI助手配置”部分的说明，让您的特定助手识别MCP服务器。
  3. 打开Figma并运行MCP Figma插件：在插件列表中找到它。
  4. 连接：在您的AI助手中，使用以下命令 "Join Figma channel abcdefg" （替换 abcdefg 频道ID显示在Figma插件中）。
  5. 互动：开始向你的AI助手发出命令，与Figma进行交互。

高级配置

存储库级配置（GitHub Copilot）

对于 GitHub Copilot编码代理，您可以在存储库级别配置MCP服务器：

  1. 导航到GitHub上的存储库设置
  2. 前往Copilot→ 编码代理
  3. 添加MCP配置：
    {
  "mcpServers": {
    "TalkToFigma": {
      "command": "npx",
      "args": ["ai-figma-mcp@latest"],
      "tools": ["*"]
    }
  }
}

环境变量

MCP服务器尊重以下环境变量：

  • FIGMA_WEBSOCKET_PORT：（可选）WebSocket服务器的自定义端口。默认为 3055.
    export FIGMA_WEBSOCKET_PORT=3056
  • DEBUG：（可选）设置为 true 从MCP服务器获取更详细的日志记录。
    export DEBUG=true

如果您通过以下方式运行MCP服务器 npx，这些变量应在运行 npx 命令。

故障排除

常见问题

  1. 未找到MCP服务器或 npx 命令失败：

    • 确保已安装Node.js（v18+），并且 npx 在系统的PATH中可用。
    • 试着跑步 npx ai-figma-mcp --version 在终端中手动查看它是否执行。
    • 如果你最近发布或更新了包，npm注册表可能会延迟。尝试 npx ai-figma-mcp@latest 或 npm cache clean --force 那就试试 npx 再一次。

  2. WebSocket连接失败/未连接到Figma插件：

    • 检查MCP服务器日志MCP服务器（例如。， npx @sethdouglasford/mcp-figma)自动启动WebSocket服务器。检查MCP服务器的控制台输出是否存在与“找不到Socket脚本”、“正在启动WebSocket服务器”或“WebSocket服务器进程已退出”相关的任何错误。
    • 端口冲突：确保端口 3055 （或您配置的 FIGMA_WEBSOCKET_PORT)未被其他应用程序使用。您可以通过以下方式进行检查 lsof -i :3055 （macOS/Linux）或 netstat -ano | findstr "3055" （Windows）。
    • 防火墙：验证防火墙没有阻止WebSocket端口上的连接。
    • Figma插件频道：仔细检查您使用的频道ID join_channel AI助手中的命令与Figma插件UI中显示的频道ID匹配。
    • WSL问题：如果使用Windows Linux子系统（WSL），请参阅“Windows+WSL指南”。

  3. AI助手无法识别工具/MCP服务器未列出：

    • 正确配置：仔细检查AI助手设置中的JSON配置。命令中的拼写错误(npx)，包名称(@sethdouglasford/mcp-figma)，或者争论会引起问题。
    • 代理模式：确保你的AI助手处于“代理”或“工具”模式，而不仅仅是简单的“聊天”或“询问”模式。
    • 重新启动助手/IDE：添加或修改MCP配置后，重新启动AI助手或IDE（游标、VS代码等）。
    • MCP服务器状态：一些助手可能会在其设置或专用面板中显示连接的MCP服务器的状态。检查是否列出了“TalkToFigma”（或您使用的名称），以及是否有任何错误消息。

  4. Figma插件的权限问题：

    • 确保MCP Figma插件已安装并正在Figma文件中运行。
    • 对于某些操作，插件需要是Figma中的活动窗口/上下文。

Windows+WSL指南

如果您在Windows上的WSL和Figma中运行MCP服务器（Node.js部分）：

  1. WSL中的Node.js：确保WSL发行版中安装了Node.js v18+。
    node --version
npm --version
  2. WebSocket服务器的主机配置: WebSocket服务器(src/socket.ts)默认情况下，侦听打开 localhost。在WSL中运行MCP服务器和在Windows上运行Figma插件时，插件需要连接到WSL的IP地址。
    • 修改 src/socket.ts 在您的本地项目中：
      // const HOST = process.env.WS_HOST || 'localhost';
const HOST = process.env.WS_HOST || '0.0.0.0'; // Change 'localhost' to '0.0.0.0'
    • 重建项目： npm run build.
    • 当您运行MCP服务器时（例如。， npx ai-figma-mcp)，它现在将使用 socket.js 倾听 0.0.0.0.
  3. Figma插件连接:
    • 在Figma插件中，当它要求提供WebSocket服务器地址时，您需要提供WSL实例的IP地址。你可以通过运行找到它 hostname -I 在WSL终端中。
    • 例如，如果 hostname -I 给予 172.23.x.x，你会进入 ws://172.23.x.x:3055 （或您配置的端口）插入Figma插件。
    • 或者：而不是修改插件，如果你 npx 命令从WSL环境运行服务器，MCP服务器将在WSL中启动套接字服务器。Windows上的Figma插件需要连接到 ws://<WSL_IP_ADDRESS>:<PORT>The join_channel 来自AI助手的命令（也在WSL中运行或连接到WSL中的MCP服务器）将正确地与此设置交互。关键是Windows上的Figma插件必须能够访问WSL内运行的WebSocket服务器。
  4. 端口转发（如果需要）: 在某些WSL设置中，您可能需要明确地将端口从Windows转发到WSL。
    # Run in PowerShell as Administrator on Windows
netsh interface portproxy add v4tov4 listenport=3055 listenaddress=0.0.0.0 connectport=3055 connectaddress=<Your_WSL_IP_Address>
    要删除它：
    netsh interface portproxy delete v4tov4 listenport=3055 listenaddress=0.0.0.0
    替换 <Your_WSL_IP_Address> 使用WSL实例的实际IP。

这里的主要变化是 npm run socket 步骤从“Windows+WSL指南”中删除，因为MCP服务器负责启动套接字服务器。修改说明 src/socket.ts 继续收听 0.0.0.0 如果用户从源代码构建并需要从Windows访问WebSocket服务器，则它仍然适用于WSL场景。如果他们正在使用 npx 已发布的包，不能直接修改 src/socket.tsThe FIGMA_WEBSOCKET_HOST 环境变量将是控制打包版本的更好方法，我们应该添加到 socket.ts.

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 -扫描具有特定类型的节点（可用于查找注释目标）

原型制作和连接

  • 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/mcp_plugin
  2. 编辑 code.js 和 ui.html.

建设项目

要为MCP服务器和WebSocket服务器构建TypeScript文件：

npm run build

这将把文件输出到 dist 目录。

要在开发过程中监视更改并自动重建，请执行以下操作：

npm run dev

最佳实践

使用Figma MCP时：

  1. 在发送命令之前，始终加入一个通道，以确保MCP服务器连接到正确的Figma插件实例。
  2. 使用以下工具获取文档概述 get_document_info 第一。
  3. 检查当前选择 get_selection 在对选定项目进行修改之前。
  4. 根据需要使用适当的创建工具：
    • create_frame 用于可能容纳其他元素或使用自动布局的容器。
    • create_rectangle 用于基本矢量形状。
    • create_text 对于文本元素。
  5. 使用验证更改 get_node_info 或者通过目视检查Figma。
  6. 利用组件实例(create_component_instance, get_instance_overrides, set_instance_overrides)为了确保设计的一致性和效率。
  7. 优雅地处理潜在错误，因为所有命令都可能引发异常（例如，如果找不到节点ID或参数无效）。
  8. 对于大型设计：
    • 如果在以下工具中可用，请使用分块参数 scan_text_nodes.
    • 如果工具为长时间操作提供了进度消息，则对其进行监控。
  9. 对于文本操作：
    • 使用批处理操作，如 set_multiple_text_contents 如果可能的话，以获得更好的性能。
  10. 要转换旧注释，请执行以下操作：
    • 扫描文本节点以识别标记和描述。
    • 使用 scan_nodes_by_types 查找注释所引用的UI元素。
    • 将标记与其目标元素匹配。
    • 对注释进行适当的分类。
    • 使用创建本机注释 set_multiple_annotations 分批。
  11. 将原型交互可视化为FigJam连接器：
    • 使用 get_reactions 提取原型流。
    • 使用以下命令设置默认连接器样式 set_default_connector （首先复制FigJam连接器）。
    • 使用生成连接线 create_connections.

许可证

麻省理工学院

相关 MCP