10分钟搞定Figma Console MCP从安装到让Claude在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-mcpFigma Console MCP 是一个专为设计系统打造的 MCP 服务器让 Claude 等 AI 助手直接连接 Figma——提取设计 Token、在 Figma 中创建组件和框架、管理变量、运行无障碍扫描。本文带你从零开始10 分钟内完成全部安装配置让 AI 真正动手在你的 Figma 文件里创建组件。它到底能帮你做什么简单来说你的设计系统变成了一组 API。能力说明 设计系统提取一键拉取 Figma 中的变量、组件和样式✏️ AI 创建设计用自然语言描述AI 在 Figma 中直接创建组件 Token 双向同步Figma 变量 ⇄ CSS / Tailwind / SCSS 等 10 种格式♿ 无障碍扫描14 项 WCAG 检查 组件评分卡 FigJam Slides创建便利贴、流程图管理演示文稿项目提供121 个工具本地模式覆盖读取、创建、编辑、审计全流程。核心工具注册见 figma-tools.ts写入操作见 write-tools.ts。准备工作3 个必备条件开始之前确认你已具备以下环境✅Node.js 18— 终端运行node --version检查低于 18 请先安装✅Figma 桌面版— 必须是 Desktop 应用网页版不支持✅一个 MCP 客户端— Claude Desktop、Claude Code、Cursor、Windsurf 等均可 不想装 Node.js可跳过本文直接使用 Cloud Mode云端配对详见 setup.md。第一步创建 Figma Token约 2 分钟在 Figma 中打开Settings → Account → Personal access tokens点击Generate new token描述填写Figma Console MCP勾选以下权限无需其他权限权限项访问级别File contentReadFile versionsReadVariablesReadCommentsRead and write点击Generate token⚠️立即复制— Token 以figd_开头只显示一次错过就无法找回这一步的本质Token 是 AI 读取你 Figma 文件的门禁卡。相关配置逻辑见 config.ts。第二步在 Claude 中配置 MCP 服务约 3 分钟根据你的客户端选择对应方式方式 AClaude Code 一条命令最快claude mcp add figma-console -s user \ -e FIGMA_ACCESS_TOKENfigd_你的Token \ -e ENABLE_MCP_APPStrue \ -- npx -y figma-console-mcplatest方式 B手动编辑 JSON 配置找到你客户端的配置文件添加以下 JSON{ mcpServers: { figma-console: { command: npx, args: [-y, figma-console-mcplatest], env: { FIGMA_ACCESS_TOKEN: figd_你的Token, ENABLE_MCP_APPS: true } } } }各客户端配置文件位置客户端macOSWindowsClaude Desktop~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.jsonClaude Code~/.claude.json%USERPROFILE%\.claude.jsonCursor~/.cursor/mcp.json%USERPROFILE%\.cursor\mcp.jsonWindsurf~/.codeium/windsurf/mcp_config.json%USERPROFILE%\.codeium\windsurf\mcp_config.json 下面是图形化配置界面示例以 OpenAI Codex 为例字段含义与 JSON 完全一致 用 Claude Code 的话直接跑上面的命令行即可无需手动编辑 JSON。完整指南见 setup.md。第三步导入 Figma 桌面桥接插件约 2 分钟这一步是把 Figma 桌面端与 MCP 服务器握手的关键。正常打开 Figma 桌面版无需任何特殊启动参数菜单 →Plugins → Development → Import plugin from manifest...选择~/.figma-console-mcp/plugin/manifest.json这个路径由 MCP 服务器自动创建首次使用前请确保 MCP 客户端至少启动过一次导入后在你的 Figma 文件中运行插件Plugins → Development → Figma Desktop Bridge插件会自动扫描 9223–9232 端口找到你的 MCP 服务器并显示Local · ready✅插件源码位于 figma-desktop-bridge/架构说明见 figma-desktop-bridge/README.md。第四步重启客户端测试AI 创建组件完全重启你的 MCP 客户端退出后重新打开在对话框中依次输入以下测试指令Check Figma status→ 应显示 WebSocket 传输已连接Create a simple frame with a blue background→ Figma 中出现一个蓝色框架 ✅证明写入权限已生效Create a card component with a header image, title, description, and action button→ Claude 会在 Figma 中直接创建一个完整的卡片组件 到这里整个安装就完成了AI 已经可以在你的 Figma 文件中创建和编辑设计。进阶更多你能直接对 AI 说的话连接成功后试试这些真实可用的指令场景你可以这样说提取设计系统获取我 Figma 文件的所有设计变量导出 Token把颜色变量导出为 CSS 自定义属性AI 创建页面创建一个登录卡片包含邮箱、密码字段和主按钮批量管理变量创建名为 Brand Colors 的颜色集合含 Light 和 Dark 模式无障碍检查对这个画布运行 WCAG 无障碍扫描FigJam 协作创建一个复盘看板分做得好待改进行动项三列更多用例见 use-cases.md完整工具列表见 tools.md。遇到问题快速对照表症状原因解决方法Failed to connect to Figma Desktop插件未运行在 Figma 中运行 Desktop Bridge 插件FIGMA_ACCESS_TOKEN not configuredToken 缺失或错误检查配置Token 必须以figd_开头Command not found: nodeNode.js 未安装安装 Node.js 18工具未出现在客户端中配置未加载完全重启 MCP 客户端插件显示 MCP scanningMCP 服务器未启动启动 / 重启你的 MCP 客户端详细排查指南见 troubleshooting.md。三种连接模式按需选择模式适合谁工具数需要 Node.jsNPX推荐想要完整能力的设计师和开发者121✅Cloud Mode用 Claude.ai / v0 / Replit 等网页端 AI96❌Remote SSE只想快速读取设计数据只读子集❌ 想深入了解架构参考 architecture.md 和 mode-comparison.md。写在最后Figma Console MCP 让设计系统不再只是 Figma 里的静态文件——它变成了 AI 可以直接查询、操作、同步的活数据源。设计师让 AI 按你的 Token 规范创建组件告别手动拖框开发者让 AI 读取真实设计数据不再靠猜margin: 16px️设计系统团队Token 双向同步Figma 和代码永不脱节整个项目采用 MIT 开源协议核心代码位于 src/core/ 目录欢迎查阅和参与贡献。【免费下载链接】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），仅供参考