AI导哈

Figma设计节点控制工具

Figma MCP Companion是一款AI辅助设计工具，通过自然语言对话创建、编辑和操作Figma设计节点，适用于快速原型设计和精细画布控制。

  • by Chrismacolor
  • Python
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 Chrismacolor/figma-mcp

使用说明

Figma MCP伴侣

用于AI辅助Figma设计的细粒度画布控件。通过自然对话创建、编辑和操纵单个设计节点——与Claude Desktop、Cursor、VS Code Copilot、Windsurf和任何兼容MCP的工具配合使用。

“为我制作一个带有英雄形象、标题、描述和蓝色CTA按钮的卡片组件。”

AI直接在Figma画布上逐节点构建它。

它如何补充官方的Figma MCP

这 官方Figma MCP服务器 该项目解决了设计工作流程的不同部分。它们旨在协同工作。

Figma MCP官方 本项目
写作方法 generate_figma_design --捕获实时浏览器UI并将其转换为可编辑的Figma框架 创建单个节点（框架、矩形、文本、椭圆），设置属性，从头开始构建布局
阅读方法 get_design_context, get_metadata, get_variable_defs, get_screenshot --丰富的设计上下文提取 read_node_tree --画布的结构化快照； take_screenshot --任何节点的PNG导出
最适合 设计到代码管道，将运行中的UI捕获回Figma，通过code Connect设计系统集成 从头开始构建新设计，对单个节点进行精细编辑，在画布上快速原型制作
需要 开发模式席位（付费计划） 免费——使用开发插件在本地运行
费率限制 Figma API限制适用 无-这是您的本地机器

为什么两者都用？

官方MCP擅长 提取设计上下文以生成代码 和 将完成的UI捕获回Figma 作为可编辑的帧。这个伴侣填补了空白 精确的节点级画布控件 --从头开始创建设计，调整单个属性，并在不离开编辑器的情况下迭代布局。

典型的组合工作流程：

  1. 阅读 使用官方MCP的现有设计——“查看此登录屏幕，了解布局、间距和令牌”
  2. 构建 与此配套的一个变体是——“现在按照相同的模式创建一个注册屏幕，其中包含一个额外的姓名字段和一个社交登录部分”
  3. 截图 您的创建可以直观地验证它——“截图，这样我就可以看到它的外观了”
  4. 迭代 通过精细编辑——“将CTA按钮加宽，并将字体凸起至18px”
  5. 捕捉 使用官方MCP完成的UI generate_figma_design 将生产代码带回画布

这两个工具都不能单独覆盖整个工作流程。总之，你的人工智能可以读取现有的设计，逐节点构建新的设计，直观地验证它们，并在代码和画布之间架起桥梁——所有这些都不需要离开你的编辑器。

快速开始

1.安装服务器

git clone https://github.com/Chrismacolor/figma-mcp.git
cd figma-mcp
python3 -m venv .venv && source .venv/bin/activate
pip install -e .

2.连接您的AI工具

克劳德桌面 （标准版本）：

增添 ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "figma-companion": {
      "command": "/full/path/to/figma-mcp/.venv/bin/figma-mcp-companion",
      "env": {
        "FIGMA_MCP_TOKEN": "pick-a-stable-token"
      }
    }
  }
}

克劳德代码 （stdio或HTTP）：

选项A--stdio（服务器在每次Claude Code会话时启动/停止）：

claude mcp add figma-companion -e FIGMA_MCP_TOKEN=pick-a-stable-token -- /full/path/to/figma-mcp/.venv/bin/figma-mcp-companion

选项B——HTTP（自己启动服务器，在会话之间继续运行）：

# In one terminal:
source .venv/bin/activate
FIGMA_MCP_TOKEN="pick-a-stable-token" figma-mcp-companion

# Then register it:
claude mcp add -t http figma-companion http://localhost:8400/mcp

要与官方的Figma MCP一起使用，请添加两者——它们相辅相成。官方MCP读取设计上下文并捕获浏览器UI；这个伴侣在画布上构建和编辑单个节点。

光标/VS代码复制品/Windsurf （HTTP）：

请先手动启动服务器：

source .venv/bin/activate
FIGMA_MCP_TOKEN="pick-a-stable-token" figma-mcp-companion

然后在编辑器的设置中添加此MCP服务器URL：

http://localhost:8400/mcp

设置 FIGMA_MCP_TOKEN 在重启过程中为您提供稳定的身份验证令牌。如果省略，每次启动时都会生成一个随机令牌并打印到控制台。

3.安装Figma插件

cd plugin && npm install && npm run build

在Figma中： 插件→ 发展→ 从清单导入插件 → 选择 plugin/manifest.json.

打开插件，粘贴您的身份验证令牌，然后单击 连接.使用AI工具时，保持插件面板打开。

它能做什么

用自然语言创建设计

让你的AI构建UI，它会向Figma发送结构化操作：

  • 框架 具有自动布局、填充、间距、角半径、阴影和剪裁功能
  • 直角和椭圆 带有填充、笔划和不透明度
  • 文本节点 包含字体系列、粗细、大小、对齐方式、行高和字母间距
  • 嵌套布局 --子元素引用其父元素来构建复杂的组件树

编辑现有设计

AI可以读取画布，按ID查找节点，并更新任何属性——重新着色按钮、更改文本内容、调整框架大小、切换可见性或完全删除元素。

截图你的工作

这 take_screenshot 该工具将任何节点（或当前选择）导出为PNG格式，并将其直接返回给AI。这使AI能够直观地验证它创建的内容并迭代——“按钮看起来太小，可以加宽并增加字体大小。”

阅读画布

read_node_tree 返回当前页面上每个节点的结构化快照——ID、名称、类型、位置、大小、填充、文本内容、字体属性和布局设置。人工智能利用这一点来了解在做出改变之前已经存在的东西。

最佳结果提示

  • 布局要具体。 “一张360像素宽的卡片，带有24像素的填充，垂直堆叠，项目之间有16像素的间隙”比“制作卡片”效果更好
  • 分批构建。 首先创建外框，检查结果，然后添加子帧。这给了人工智能一个纠正航向的机会。
  • 使用屏幕截图进行迭代。 在人工智能构建了一些东西之后，让它截图并评论自己的工作。它通常会发现间距或尺寸问题并加以解决。
  • 结合官方MCP。 用官方的Figma MCP将AI指向现有的设计，然后让它使用这个伴侣构建一个变体。AI会自动继承设计语言。
  • 保持插件打开。 Figma插件必须打开并连接才能执行操作。如果AI报告插件已断开连接，请切换到Figma并检查插件面板。

环境变量

变量 默认值 描述
FIGMA_MCP_TOKEN 每次启动随机 服务器和插件之间共享稳定的承载令牌
FIGMA_MCP_PORT 8400 插件网桥和MCP HTTP端点的HTTP端口

运作原理

Your AI Tool ──[MCP stdio or HTTP]──► Python Server ◄──[HTTP polling]──► Figma Plugin
                                      (single process)                    (runs inside Figma)
                                      ├─ MCP tools
                                      ├─ HTTP bridge
                                      └─ Job queue
  1. 你的AI调用MCP工具（例如，“创建框架”）→ 服务器将作业排队
  2. Figma插件每1.5秒轮询一次服务器→ 接受这份工作
  3. 该插件对实时Figma文档执行操作
  4. 结果（节点ID、屏幕截图、错误）通过同一网桥返回
  5. AI收到结果后可以继续构建

一切都在本地运行。没有数据离开你的机器。

相关 MCP