用 Figma MCP 把想法在 Figma 上可视化

1. 定义

Figma MCP = 把 Figma 接成 AI 模型的工具来源（MCP Server），让 AI 客户端（Claude / Cursor / Claude Code 等）能直接读你的 Figma 设计、甚至创建/修改其中的图形。你用自然语言描述想法，AI 调用 MCP 工具把它变成 Figma 里的 frame。

一句话：MCP 是”AI 和 Figma 之间的 USB-C 接口”——接上后，模型就能把文字想法”画”进 Figma。协议本身见 ../../ai-agent-guide/mcp.md；Figma 里怎么把画面连成可点原型见 figma-prototype.md。

类比：以前你要手动在 Figma 里拖组件；现在你跟 AI 说”画个登录页，上面 logo 下面输入框和按钮”，AI 经 MCP 直接往你的 Figma 文件里生成这些 frame。

2. 工作原理

你的 AI 客户端（Claude / Cursor / CodeBuddy）
        │  MCP 协议（tools 调用）
        ▼
┌─────────────────────────────┐
│  Figma MCP Server            │  ← 本地或远程跑的桥
└──────────────┬──────────────┘
               │  Figma API + 访问令牌
               ▼
         Figma（云端文件 / 桌面 App 当前文件）
   ├─ 读：取设计上下文、出代码、取变量/token
   └─ 写：按规格创建 frame / 文本 / 组件（Create API）

3. 官方 MCP 的能力（读 + 写）

Figma 官方 MCP Server（2025-09 上线，beta 期免费，后续将按用量收费）同时支持两类操作：

能力	做什么
读（Extract / Code）	取设计上下文（变量/组件/布局）、把选中 frame 转成代码（CSS/React/Swift）、Code Connect 保持设计系统一致
写（Write to canvas）	直接在画布上创建/修改原生 Figma 内容：frame、组件、变量、自动布局

关键更新：现在官方 Server 原生支持”写回画布”，不再需要社区封装 Create API。要稳定用写能力，官方建议给 MCP 客户端装上 Figma 的 skills（让 agent 按正确流程创建/更新内容）。

两种接法

接法	说明
Remote MCP（推荐）	直连 Figma 托管的端点，不需桌面 App，功能最全
Desktop 本地版	本地跑，适合企业/组织内网需求

你不需要自己写/定义 MCP——官方 Server 开箱即用，连上 + 用 Figma 账号授权即可。只有极特殊的私有需求（如接内部设计系统）才需自己包一层。

4. 基本搭建（架构级步骤）

选接法（推荐 Remote）：官方推荐 Remote MCP——在客户端里选 Figma、用 Figma 账号授权即可，无需 token、无需桌面 App。需要本地/内网再考虑 Desktop 版。
（仅命令行/旧方式）令牌接入：若用自托管命令行 Server（如 npx @figma/mcp-server），去 Figma → Settings → Security → Personal access tokens 生成 token（只显示一次），配 FIGMA_API_TOKEN=你的token。
在客户端里用：让模型列可用工具（发现机制见 ../../ai-agent-guide/mcp.md 第「动手」节），然后描述想法，如”在我的设计文件里画一个三页的引导流程”。
实时看它办公：Figma 是实时协作的——agent 经 MCP 建/改 frame 时，你的画布会实时更新，等于看着 AI 把想法画出来。frame 生成后，可进 Prototype 模式连线（见 figma-prototype.md）。

⚠️ 权限边界：MCP 只碰你账号有权限的 Figma 文件，不是监控他人的工具。

// 仅"命令行 / 自托管"方式才需要这段配置（Remote 方式在客户端里点授权即可，无需它）
// 客户端 mcp 配置示例（示意，具体字段看客户端文档）
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@figma/mcp-server"],
      "env": { "FIGMA_API_TOKEN": "你的token" }
    }
  }
}

5. 典型工作流

想法 → Figma 线框 → 可交互原型

你口述想法 ──▶ AI 经 Figma MCP 生成 frame（线框）
                        │
                        ▼
              在 Figma 里手动/再让 AI 细化
                        │
                        ▼
              切 Prototype 模式连线（figma-prototype.md）
                        │
                        ▼
              Present 演示，验证交互（呼应 心得.md 的"快速原型"）

设计 → 代码

选中 Figma 设计 ──▶ Dev Mode MCP 取代码 ──▶ 直接进项目（mcp.md 的"应用示例"）

6. 常见误区

❌ “MCP 让模型凭空学会 Figma 操作” → 模型靠运行时实时读到的工具 schema 工作，不是训练时记住的；换 Server 第一次也能用（见 ../../ai-agent-guide/mcp.md 误区节）。

❌ “接了 Figma MCP 就能随意改任何文件” → 权限由 token 和文件共享范围决定；token 只有你能访问的文件它才动得了。

❌ “AI 画出来的就是成品设计” → 默认是线框/草图级别，间距、视觉细节仍需设计师在 Figma 里收尾；它加速起点，不替代设计判断。

❌ “配置 MCP 是给模型上课” → 配置只是静态接线清单（命令/参数/ token），模型每次会话动态发现工具（同 mcp.md 误区）。

7. 延伸阅读 / 关联概念

../../ai-agent-guide/mcp.md — MCP 协议是什么、发现机制、配法、误区（本文的协议底座）
figma-prototype.md — AI 画出 frame 后，怎么连成可点原型
../../ai-agent-guide/skills.md — 另一种给 Agent 加能力的方式（MCP 是协议，Skill 是”应用”）
../心得.md — 快速原型是低成本探索交互范式，Figma MCP 把”从想法到可演示”压到极短
figma-mcp-cli.md — 实操：在 Claude Code 终端里装 Figma 插件 + 连 Remote/Desktop MCP
figma-mcp-gui.md — 实操：在 VS Code / Cursor 里配 mcp.json + 装 Figma 扩展（含 skill）
官方参考：Figma 帮助中心 “MCP” / “Dev Mode MCP Server” 章节（当前支持的读/写工具清单）

第二大脑 / Knowledge Bank

探索

figma-mcp