Figma Ui MCP

figma ui mcp

Claude Code to Figma · Antigravity to Figma · Cursor to Figma · Any MCP IDE to Figma

✅ Tested: Claude Code, Antigravity | 🔧 Compatible: Cursor, VS Code, Windsurf, Zed (any MCP stdio client)

双向Figma MCP电桥 --让AI助手（Claude Code、Cursor、Windsurf、Antigravity、VS Code Copilot或任何兼容MCP的IDE） 直接在Figma画布上绘制UI 和 读回现有设计 作为结构化数据、屏幕截图或代码就绪令牌。不需要Figma API密钥-完全通过本地主机工作。

需要Figma桌面 --插件通过以下方式与MCP服务器通信 localhost HTTP轮询。Figma的web应用程序不允许本地主机网络访问，因此 Figma桌面是必需的.

Claude ──figma_write──▶ MCP Server ──HTTP (localhost:38451)──▶ Figma Plugin ──▶ Figma Document
Claude ◀─figma_read──── MCP Server ◀──HTTP (localhost:38451)── Figma Plugin ◀── Figma Document

localhost网桥的工作原理

MCP服务器启动绑定到的小型HTTP服务器 localhost:38451Figma插件（在Figma Desktop中运行）使用 长轮询 --服务器最多可保存8秒的请求，直到工作到达，当新的操作排队时立即刷新（接近实时延迟\ Claude Code (CLI)

# Project scope (default)
claude mcp add figma-ui-mcp -- npx figma-ui-mcp

# Global scope (all projects)
claude mcp add --scope user figma-ui-mcp -- npx figma-ui-mcp

Claude Desktop

编辑配置文件：

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Cursor

编辑 .cursor/mcp.json （项目）或 ~/.cursor/mcp.json （全球）：

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

VS Code / GitHub Copilot

编辑 .vscode/mcp.json （项目）或添加到 settings.json （全球）：

{
  "mcp": {
    "servers": {
      "figma": {
        "command": "npx",
        "args": ["-y", "figma-ui-mcp"]
      }
    }
  }
}

Windsurf

编辑 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

Antigravity (Google)

1. 打开 “…”下拉菜单 在代理面板的顶部
2. 点击 “管理MCP服务器” → “查看原始配置”
3. 添加 mcp_config.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-ui-mcp"]
    }
  }
}

From source (any client)

git clone https://github.com/TranHoaiHung/figma-ui-mcp
cd figma-ui-mcp
npm install
# Then point your MCP client to: node /path/to/figma-ui-mcp/server/index.js

⚠️ 重要提示：添加MCP服务器后，您必须重新启动IDE/AI客户端（退出并重新打开）。 MCP服务器仅在启动时加载，仅仅保存配置文件是不够的。这适用于克劳德码、光标、VS码、风帆和反重力。

步骤2--安装Figma插件

⬇ 下载plugin.zip --不需要git克隆

1. 下载并 解压 plugin.zip 机器上的任何地方
2. 打开 Figma 桌面版 （必需--web应用程序无法访问本地主机）
3. 首选 插件→ 发展→ 从清单导入插件。..
4. 选择 manifest.json 从解压缩的文件夹中
5. 跑 插件→ 发展→ Figma UI MCP桥

插件UI显示 绿点 当MCP服务器连接时。

更新到较新版本

# Step 1 — get the new version + plugin path
npx figma-ui-mcp@latest --version
# figma-ui-mcp v2.5.12  —  plugin: /.../.npm/_npx/.../figma-ui-mcp/plugin

# Step 2 — restart Claude / your IDE so the MCP server reloads

# Step 3 — re-link the Figma plugin (manual, one-time per update)
#   Figma Desktop → Plugins → Development → Manage plugins in development
#   Remove old "Figma UI MCP Bridge" → "+" → Import plugin from manifest...
#   Select manifest.json from the plugin path printed in Step 1

# Step 4 — verify
#   Ask your AI: "figma_status"
#   pluginVersion in the response should match the npm version above

Figma插件可以 不 自动更新——每当插件发生变化时，都需要重新链接（步骤3）。

步骤3——将AI连接到Figma

告诉你的AI助手连接：

"Connect to figma-ui-mcp"

AI将呼叫 figma_status 并确认：

✅ Connected — File: "My Project", Page: "Page 1", Plugin v2.5.5

如果你看到“插件未连接”，请确保Figma插件正在运行（步骤2）。

第4步——从提示开始设计

一旦连接，只需用自然语言描述你想要什么：

"Use figma-ui-mcp to draw a login screen for mobile"

AI将自动：

1. 呼叫 figma_docs 加载API参考和设计规则
2. 呼叫 figma_read get_page_nodes 了解当前画布
3. 呼叫 figma_write 在Figma画布上创建设计
4. 呼叫 figma_read screenshot 验证结果

提示示例

获得更好结果的提示

• 风格要具体: "dark theme", "glassmorphism", "minimal white" 为AI提供明确的方向
• 提及平台: "mobile" (390×844), "tablet" (768×1024), "desktop" (1440×900)
• 迭代第一次抽签后，说 "fix the spacing" 或 "make the buttons bigger" --AI读取并修改现有节点
• 使用选择：在Figma中选择一个框架并询问 "improve this design" --AI首先读取您的选择
• 多屏幕流: "Now draw the signup screen next to the login screen" --AI将帧并排放置

工作流摘要

You: "Connect to figma-ui-mcp"
AI:  ✅ Connected to Figma

You: "Draw a mobile onboarding screen with 3 steps"
AI:  [calls figma_docs → figma_write → figma_read screenshot]
AI:  ✅ Done — here's what I created: [inline screenshot]

You: "The title text is not centered"
AI:  [calls figma_read get_selection → figma_write modify → screenshot]
AI:  ✅ Fixed — text is now centered

You: "Now draw the next onboarding screen beside it"
AI:  [reads page_nodes to find position → draws at x+440]
AI:  ✅ Done — 2 screens side by side

figma_status     — check connection (always call first)
figma_docs       — load API reference (call before drawing)
figma_write      — draw / modify UI on canvas
figma_read       — extract design data, screenshots, SVG

______________________________________________________________________

使用示例

绘制屏幕

问克劳德： *绘制一个带有侧边栏、标题和4张KPI卡的深色仪表板*

克劳德打电话来 figma_write 代码如下：

await figma.createPage({ name: "Dashboard" });
await figma.setPage({ name: "Dashboard" });

const root = await figma.create({
  type: "FRAME", name: "Dashboard",
  x: 0, y: 0, width: 1440, height: 900,
  fill: "#0f172a",
});

const sidebar = await figma.create({
  type: "FRAME", name: "Sidebar",
  parentId: root.id,
  x: 0, y: 0, width: 240, height: 900,
  fill: "#1e293b", stroke: "#334155", strokeWeight: 1,
});

await figma.create({
  type: "TEXT", name: "App Name",
  parentId: sidebar.id,
  x: 20, y: 24, content: "My App",
  fontSize: 16, fontWeight: "SemiBold", fill: "#f8fafc",
});
// ... continue

阅读设计

问克劳德： *“读取我选择的框架并将其转换为Tailwind CSS”*

克劳德打电话来 figma_read 随着 operation: "get_selection"接收完整的节点树， 然后生成相应的代码。

截图一帧

figma_read  →  operation: "screenshot"  →  nodeId: "123:456"

返回一个Claude可以分析和描述的base64 PNG。

______________________________________________________________________

建筑

figma-ui-mcp/
├── server/
│   ├── index.js            MCP server (stdio transport)
│   ├── bridge-server.js    HTTP bridge on localhost:38451 (long-poll, multi-session)
│   ├── code-executor.js    VM sandbox — safe JS execution + 7-lib icon fetcher
│   ├── tool-definitions.js MCP tool schemas (figma_status / _write / _read / _docs)
│   └── api-docs.js         API reference text (served to AI via figma_docs)
├── src/plugin/             Plugin source (concat-built into plugin/code.js)
│   ├── utils.js, svg-path-helpers.js, paint-and-effects.js, read-helpers.js
│   ├── handlers-write.js, handlers-read.js, handlers-read-detail.js,
│   │   handlers-library.js, handlers-tokens.js, handlers-write-ops.js
│   └── main.js
└── plugin/
    ├── manifest.json       Figma plugin manifest
    ├── code.js             Plugin main (auto-generated — 3600+ LOC)
    └── ui.html             Plugin UI — long-poll client + status dot

安全

______________________________________________________________________

可用的写入操作(figma_write)

核心CRUD

create / modify --任何节点上都有高级道具：

页面管理

节点操作

组件

设计符号和风格

applyVariable 支持的字段 --将FLOAT/COLOR/STRING/BOOLEAN变量绑定到：

• 颜色: fill, stroke
• 几何: opacity, width, height, strokeWeight
• 圆角半径: cornerRadius +个人 topLeftRadius / topRightRadius / bottomLeftRadius / bottomRightRadius
• 间距 （自动布局）： paddingTop, paddingBottom, paddingLeft, paddingRight, itemSpacing, counterAxisSpacing
• 排版 （TEXT节点）： fontSize, letterSpacing, lineHeight, paragraphSpacing, paragraphIndent
• 字体交换（字符串）: fontFamily, fontStyle, characters --互换内部→ SF Pro通过1个变量
• 能见度（BOOLEAN）: visible

图像和图标助手（服务器端）

loadIcon 回退优先级 （先填，iOS风格优先）： 电离子 （iOS已填充）→ 流畅 UI （Win11已填写）→ 独自创立 （已填写）→ 磷光体 （已填写）→ 表格已填写 (4,500+) → 表概述 → 明亮的 （大纲回退）

免费更换已填充的Icons8 ios。Ionicos命名怪癖：贝尔→notifications\ API完整参考和所有设计规则：运行 figma_docs 在您的AI客户端中。

______________________________________________________________________

明星历史

如果 figma ui mcp 帮助你，请给它一颗星——它帮助别人发现这个项目！

](https://github.com/TranHoaiHung/figma-ui-mcp/stargazers)


______________________________________________________________________

许可证


______________________________________________________________________

关键词

figma mcp、claude代码到figma、游标到figmas、ai到figmai、figmaai插件、figma-mcp桥、figmamcp服务器、figma设计到代码、代码到fitma设计、ai ui设计、figma自动化、figma-plugin-ai、模型上下文协议figma，claude figma；windsurf figma。x figma ui mcp