企业官网建设流程全解析

Figma Console MCP 4种连接模式终极对比：NPX、Cloud Mode、Remote SSE与Local Git到底怎么选？

【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcp

Figma Console MCP 是一个把 AI 助手直接连进 Figma 的 MCP 服务器，让 AI 能读取设计数据、创建组件、双向同步设计令牌。本文对比它的 4 种连接模式——NPX、Cloud Mode、Remote SSE 与 Local Git，帮助新手用一张决策表选对 Figma MCP 配置方式，少走弯路。

🎯 30秒决策：先对号入座

四种模式的本质区别在于代码跑在哪、能干什么：本地模式跑在你电脑上（全功能），云端模式跑在 Cloudflare Workers（免装 Node.js），远程 SSE 只读。

💡 一句话总结：Remote SSE 只读 → Cloud Mode 解锁 96 个写入工具 → Local（NPX/Git）拥有全部 121 个工具，还能实时监听。

🚀 NPX 模式：一条命令装好 121 个工具（最推荐）

适合：几乎所有想"让 AI 动手设计"的用户。

NPX 模式以 npm 包形式分发的 Local 模式，服务器跑在你自己的机器上，自动用@latest保持最新，无需 git 操作。

三步走：

1. 拿到 Figma Token：在 Figma 后台创建个人访问令牌（以figd_开头），勾选 File content、Variables、Comments 权限即可。
2. 配置 MCP 客户端：在 Claude Code 里一条命令完成：

   claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest

   其他客户端（Cursor、Windsurf、Claude Desktop）则在 JSON 配置里填npx -y figma-console-mcp@latest加同样的环境变量。

3. 导入 Desktop Bridge 插件：在 Figma Desktop 里 Plugins → Development → Import plugin from manifest，选~/.figma-console-mcp/plugin/manifest.json，运行后即通过 WebSocket 自动连接（端口 9223–9232 自动协商，多实例不冲突）。

以 OpenAI Codex 为例，图形化配置界面里就是填npx+ 两个参数 + 两个环境变量：

你得到的能力：设计创建、变量管理、组件实例化、FigJam、版本历史 diff、控制台日志流、实时选区追踪、figma_ds_*代码库→设计系统提取——全部 121 个工具。

📖 完整分步图文见 docs/setup.md，Desktop Bridge 插件说明见 figma-desktop-bridge/README.md。

☁️ Cloud Mode：网页 AI 客户端免 Node.js 写 Figma

适合：用 Claude.ai、Lovable、v0、Replit 这类浏览器端AI 平台做设计的用户。

Cloud Mode 是"Remote 端点 + 云端写中继"：你的 AI 客户端连到云端/mcp端点，写操作通过 Durable Object 中继 → WebSocket → 转发给 Figma Desktop 里运行的 Desktop Bridge 插件执行。中继源码可查看 src/core/cloud-websocket-relay.ts。

配对流程（约 1 分钟）：

1. 在 AI 平台的 MCP 设置里粘贴端点 URL，并把 Figma PAT 作为 Bearer Token 填入；
2. 在 Figma Desktop 运行 Desktop Bridge 插件，对 AI 说一句 "Connect to my Figma plugin"；
3. AI 给出6 位配对码（5 分钟有效），在插件里打开 Cloud Mode 开关、输入配对码 → 连接成功。

96 个工具覆盖创建/编辑/删除设计、变量管理（走 Plugin API，Free/Pro 套餐也能用）、FigJam、Slides、评论、版本历史。

⚠️ 与 Local 模式的差距：没有实时选区追踪、文档变更监听和控制台日志流——这三样依赖本地 WebSocket。

📡 Remote SSE：2 分钟零配置，只读先体验

适合：想快速评估工具、或只需要"读"设计数据（变量、组件、截图、设计系统提取）的用户。

这是唯一零安装的模式：在 Claude Desktop → Settings → Connectors 里添加自定义连接器，粘贴/sse端点 URL，首次调用设计工具时浏览器自动弹出 OAuth 授权，一次点击 Allow 即可，Token 自动刷新。

边界要说清楚：

• ❌ 不能创建或修改任何设计；
• ⚠️ 读 Variables 需要 Enterprise 套餐（Local/Cloud 模式无此限制）；
• ❌ 无法使用 Desktop Bridge 插件（云端 Worker 连不到你本机的 localhost）。

评估满意后，随时可以按上面 NPX 或 Cloud Mode 章节升级到完整能力。

🛠️ Local Git：贡献者的源码级安装

适合：想修改/调试 MCP 服务器源码、贡献 PR、或需要手动控制更新时机的开发者。

git clone https://gitcode.com/gh_mirrors/fi/figma-console-mcp cd figma-console-mcp npm install && npm run build:local

然后在客户端配置里把命令指向本地构建产物dist/local.js（源码入口 src/local.ts），其余步骤与 NPX 完全相同。与 NPX 的差异只有两点：拥有源码（可断点调试 src/index.ts 等全部逻辑）、更新需手动git pull+ 重新构建。

📊 四种模式核心能力对照表

🧭 按角色快速选型

• 设计师：直接用NPX，或不想装 Node.js 时用 Cloud Mode；
• 开发者：日常用NPX，调试 MCP 服务器本身切Local Git；
• 产品经理 / 网页 AI 重度用户：Cloud Mode，在浏览器里指挥 AI 画稿；
• 好奇尝鲜者：先Remote SSE只读体验，2 分钟见效，满意再升级。

模式切换不心疼：四种模式共享同一套 Figma Token，从 Remote SSE 升级到 NPX 只需在客户端多加一段 JSON 配置，详细取舍逻辑见 docs/mode-comparison.md。

🚑 常见坑位速查

架构细节可深入 docs/architecture.md，排障大全见 docs/troubleshooting.md。

记住这个口诀：只读用 SSE，网页 AI 用 Cloud，本地全能用 NPX，改源码才 Git——选对连接模式，AI 才能真正帮你把 Figma 里的设计系统变成生产力。

【免费下载链接】figma-console-mcpYour design system as an API. Connect AI to Figma for extraction, creation, and debugging.项目地址: https://gitcode.com/gh_mirrors/fi/figma-console-mcp