Figma Console MCP自托管部署完全指南Cloudflare WorkersOAuth 2.0Durable Object企业级配置【免费下载链接】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-mcpFigma Console MCP 是一款面向设计系统的 MCP 服务器可将 AI 助手接入 Figma完成设计令牌提取、组件创建、变量管理与无障碍审计。自托管部署让你在自己的 Cloudflare Workers 上运行它用OAuth 2.0实现按用户授权用Durable Object维持持久会话——数据完全自主可控是团队与企业接入 Figma 的稳妥方案。为什么选择自托管部署官方提供的公共实例适合大多数个人用户但以下场景更适合部署自己的实例场景自托管的价值处理敏感设计数据设计数据不经过第三方公共服务器需要稳定可用性自主运维可定制限流与告警企业安全合规要求密钥全部存放在自己的 Cloudflare 账户需要修改源码可基于源码定制工具与逻辑官方文档中对自托管的说明见 docs/self-hosting.md。1 分钟看懂自托管部署架构整个部署由四类 Cloudflare 组件协作完成配置都集中在 wrangler.jsonc 中AI 客户端 → Cloudflare Worker入口 ├─→ REST 客户端 → Figma API读取设计数据 ├─→ MCP 会话 Durable Object持久化 MCP 会话 ├─→ Plugin Relay Durable Object云写中继 │ └─ WebSocket → Desktop Bridge 插件 → Figma └─→ KV 命名空间OAuth Token / OAuth State 存储Cloudflare Worker服务入口主逻辑位于 src/index.ts两个 Durable ObjectMCP_OBJECT负责保持每个用户的 MCP 会话长连接PLUGIN_RELAY即 src/cloud-websocket-relay.ts负责把网页端 AI 的写操作经 WebSocket 中继到 Figma 桌面端插件两个 KV 命名空间OAUTH_TOKENS加密存储每位用户的 Figma 令牌OAUTH_STATE防重放攻击的授权状态Browser Rendering 绑定支撑云端模式的控制台日志、截图、页面导航工具 详细的数据流图与组件职责可参考 docs/architecture.md。部署前准备三样东西缺一不可✅Cloudflare 账户免费版即可起步 ✅Wrangler CLInpm install后自动可用是 Cloudflare 的部署工具 ✅Figma OAuth 应用在 Figma 开发者平台创建一个 App用于后面配置 OAuth 2.0 按用户授权另外注意云端模式的浏览器渲染工具截图、看控制台依赖 Cloudflare 的 Browser Rendering API免费额度为每天 10 分钟、3 个并发浏览器超出后按每浏览器小时计费——个人使用基本零成本。快速部署到 Cloudflare Workers4 步上线第 1 步克隆并安装git clone https://gitcode.com/gh_mirrors/fi/figma-console-mcp cd figma-console-mcp npm install第 2 步登录 Wranglernpx wrangler login浏览器会打开 Cloudflare 授权页确认后回到终端即完成认证。第 3 步配置密钥企业部署推荐用 OAuth 2.0 按用户认证下一步详述两个密钥都要设置npx wrangler secret put FIGMA_OAUTH_CLIENT_ID npx wrangler secret put FIGMA_OAUTH_CLIENT_SECRET常用可选配置密钥默认值作用LOG_LEVELinfo日志级别trace/debug/info/warn/error/fatalBROWSER_TIMEOUT120000浏览器操作超时毫秒MAX_CONSOLE_LOGS1000控制台日志缓冲上限第 4 步构建并部署npm run build:cloudflare npm run deploy看到Deployment complete!后会得到一个形如https://figma-console-mcp.你的子域名.workers.dev的专属端点。OAuth 2.0 认证配置告别共享 Token自托管的最大优势之一是OAuth 2.0 按用户认证每位团队成员用自己的 Figma 账户授权令牌加密存储在 Workers KV 中按会话隔离90 天自动过期清理——彻底避免大家共用一个个人访问令牌的安全隐患。管理员只需 3 步创建 Figma OAuth 应用在 Figma 开发者平台进入 My Apps → Create new app名称可填Figma Console MCP配置重定向 URL填写你的部署地址加/oauth/callback例如https://mcp.example.com/oauth/callback务必与最终部署 URL 完全一致将 Client ID 和 Client Secret 设为 Wrangler 密钥即上文的FIGMA_OAUTH_CLIENT_ID/FIGMA_OAUTH_CLIENT_SECRET完成后用健康检查接口验证curl https://你的域名/health返回中oauth_configured: true即表示 OAuth 配置生效。终端用户的体验则完全无感第一次调用 Figma 工具时浏览器自动弹出授权页 → 登录并点击允许 → 后续所有 API 调用自动使用个人令牌过期自动刷新。完整的认证流程与故障排查见 docs/oauth-setup.md。Durable Object云写中继如何维持连接传统 MCP 请求是无状态的但 Figma 的写操作需要一条活的通道。PluginRelayDO这个 Durable Object 就是答案它把网页端 AI 客户端如 Claude.ai的写命令经 WebSocket 实时中继到你 Figma Desktop 里的 figma-desktop-bridge/ 插件由插件调用 Figma Plugin API 执行后原路返回结果。AI 客户端 → 云 MCP 服务器 → Durable Object 中继 → Desktop Bridge 插件 → Figma配对方式很简单让 AI 说一句Connect to my Figma plugin它会给出一个 6 位配对码5 分钟有效在插件界面开启 Cloud Mode、输入配对码点击 Connect 即可云端即可获得 96 个工具含完整写权限。验证部署并接入 AI 客户端部署成功后把 MCP 客户端指向你的专属端点即可。以 Claude 桌面端为例在 MCP 配置文件中添加{ mcpServers: { figma-console: { command: npx, args: [mcp-remote, https://你的域名/sse] } } }下图是一个典型 MCP 客户端的服务器配置界面自托管后只需把端点地址换成你自己的 Workers 域名Claude Code 用户可以用一条命令完成接入claude mcp add figma-console -- npx -y mcp-remotelatest https://你的域名/sse小贴士/sse端点适合 Claude Desktop / Claude Code/mcp端点适合网页端 AI 客户端搭配配对码走 OAuth/Bearer 认证。各端点能力差异对照见 docs/mode-comparison.md。监控、成本与回滚实时日志npx wrangler tail可跟随生产日志加--status error只看错误。成本估算Workers 免费层每天 10 万请求付费层 5 美元/月含 Durable Objects KV使用规模预估月成本个人开发者0 美元免费层5 人小团队5–15 美元20 人团队20–50 美元版本管理更新走git pull → npm install → npm run build:cloudflare → npm run deploy出问题可用npx wrangler rollback一键回滚npx wrangler deployments list查看历史版本。企业级安全最佳实践密钥管理只通过wrangler secret put设置静态加密绝不提交到代码仓库也不写进 wrangler.jsonc令牌最小权限OAuth 应用只申请file_content:read、library_content:read、file_variables:read等必要作用域限流防护在 Cloudflare 仪表盘的 Security → WAF 中为 Worker 路由添加按 IP 限流规则访问控制进阶可加 API Key 校验中间件配合npx wrangler secret put API_KEY使用部署失败、OAuth 报错、成本偏高等常见问题官方已整理好排查清单见 docs/troubleshooting.md。小结能力配置要点部署到 Cloudflare Workersnpm run build:cloudflare npm run deploy密钥经wrangler secret设置OAuth 2.0 按用户认证Figma OAuth 应用 回调 URL 精确匹配 两个 OAuth 密钥Durable Object 持久会话MCP_OBJECT维持会话、PLUGIN_RELAY云写中继已在 wrangler.jsonc 中预配上线验证/health返回healthy且oauth_configured: true再让 AI 创建一个蓝色矩形验证写权限按本指南走完你就拥有了一个数据自主、按用户授权、带持久会话的企业级 Figma MCP 实例——AI 助手从此能安全地读懂并改写你的设计系统。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考