figma-mcp

用 Rust 编写的高性能、双向 Model Context Protocol (MCP) 服务器，可将 AI 编程助手直接连接到 Figma Desktop。

使 AI 智能体（Claude Code、Cursor、Windsurf、Antigravity、VS Code、Zed）能够直接在 Figma 画布上绘制 UI，并以结构化的 JSON 树、设计令牌、CSS 和截图形式读回现有设计——无需任何外部 API 密钥。

⚡ 亮点

• 纯 Rust 原生性能：启动时间 < 1ms，内存占用 ~3MB RAM，零 GC 暂停。

• 双向桥接：AI 既可以写入 UI（绘制矢量、组件、画框、自动布局），也可以读取设计（提取层级、计算样式、捕获画布）。

• 沙箱化 JS 运行时：由 Boa（纯 Rust ECMAScript 引擎）驱动，安全执行设计脚本。

• 内置资源 CDN：自动从 7 个图标库（Ionicons、Lucide、Tabler、Bootstrap、Fluent、Phosphor）获取并规范化 SVG 图标。

• 多标签 / 多会话支持：可同时无缝连接到多个已打开的 Figma 文件。

• 100% 本地隐私：所有通信均通过 HTTP 长轮询严格保持在 127.0.0.1:38451 上。

Related MCP server: Figma Dash MCP Server

🏛️ 架构

┌─────────────────────────────────────────────────────────┐
│               Terminal (Standalone Server)              │
│                       figma-mcp                         │
│  • MCP SSE Transport (/sse, /message)                   │
│  • Sandboxed JS Runtime (Boa)                           │
│  • Built-in Asset & Icon Resolver                       │
│  • Async WebSocket & HTTP Long-Polling Bridge (Axum)    │
└───────────────▲─────────────────────────▲───────────────┘
                │ (ws://127.0.0.1:38451)  │ (http://127.0.0.1:38451/sse)
                │                         │
      ┌─────────┴─────────┐     ┌─────────┴─────────┐
      │   Figma Desktop   │     │ AI Assistant(s)   │
      │ (Plugin Bridge)   │     │ Antigravity/Cursor│
      └───────────────────┘     │ Claude Code / Zed │
                                └───────────────────┘

🚀 快速开始

1. 使用 NPX 一行启动（无需 Rust 工具链）

你可以在任何 Mac、Linux 或 Windows 机器上零配置启动 figma-mcp：

npx figma-mcp

这将自动下载适用于你架构的预构建原生二进制文件并启动服务器。

或者，如果你在 Cursor / Claude Desktop / Windsurf / Antigravity MCP 设置中进行配置：

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

2. 或从源码构建（Rust）

先决条件：Rust 工具链（cargo >= 1.80）。

git clone https://github.com/BuiHung1612/figma-mcp.git
cd figma-mcp
cargo build --release
./target/release/figma-mcp

3. 安装 Figma 插件

1. 打开 Figma Desktop。

2. 转到 Plugins → Development → Import plugin from manifest...

3. 从本仓库中选择文件：plugin/manifest.json。

4. 运行插件（Plugins → Development → Figma MCP Bridge）。

5. 插件 UI 将显示一个绿点（Connected）。

4. 配置你的 MCP 客户端

Google Antigravity（SSE 传输 - 推荐）

添加到你的 ~/.gemini/config/mcp_config.json 或项目的 .agents/mcp_config.json：

{
  "mcpServers": {
    "figma-mcp": {
      "serverUrl": "http://127.0.0.1:38451/sse"
    }
  }
}

Claude Code / Cursor / Windsurf / VS Code

你可以通过 SSE 或 stdio 连接：

选项 A：SSE 传输（推荐）

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://127.0.0.1:38451/sse"
    }
  }
}

选项 B：Stdio 子进程（通过 NPX）

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

🛠️ MCP 工具参考

figma-mcp 提供 7 个一流的 MCP 工具：

figma_get_selection

对 Figma 画布上当前选中的图层/画框进行超快速、令牌压缩的检查。返回压缩后的布局和排版层级结构，令牌数量减少 60-80%。

figma_inspect_node

按 ID 或名称检查特定节点，返回完整的设计上下文、CSS、自动布局规则和排版。

figma_export_asset

将任意 Figma 节点/图层直接导出为 PNG、JPG 或 SVG。

• outputPath：指定时（例如 src/assets/logo.png），直接保存到磁盘并返回最小化的 JSON 元数据，而不是用大量 base64 字符串填满上下文窗口！

figma_status

检查实时桥接连接状态、已连接的 Figma 标签页、活动文件名和延迟统计。

figma_write

在沙箱化 VM 中执行 JavaScript 绘制命令，以在 Figma 画布上构建或修改设计。

• 支持自动布局（layoutMode、itemSpacing、padding）、排版、填充、描边、圆角、投影和组件创建。

• 支持图标加载：figma.loadIcon("ionicons", "heart", { size: 24, fill: "#ff4757" })。

• 支持图片插入：figma.loadImage(url, { width: 300, height: 200 })。

figma_read

用于高级查询的通用读取器：get_design、scan_design、screenshot、export_svg、get_variables、get_styles、search_nodes。支持通过 outputPath 导出文件。

figma_docs

获取 figma_write 的内置文档、设计规则、布局指南和代码示例。

• section："all" | "rules" | "layout" | "api" | "tokens" | "icons"

figma_rules

审计当前的 Figma 文档，生成一致性规则和令牌定义，以指导 AI 生成。

💻 开发与测试

# Run server directly in debug mode
cargo run

# Build release binary
cargo build --release

# Run automated MCP test suite
./scripts/test-rust-mcp.sh

# Rebuild Figma plugin bundle (if plugin-src/ is modified)
node scripts/build-plugin.js

📄 许可证

MIT © BuiHung1612 — 可自由使用、修改和分发。详见 LICENSE。