southleft/figma-console-mcp

这是什么？

核心功能

• 01读取 Figma 变量、组件、样式和文件结构，供 AI 使用
• 02在 Figma 中创建和编辑 Frame、组件、文本、填充与自动布局
• 03在 DTCG JSON、CSS、Tailwind 等格式之间双向同步设计 token
• 04将 Figma 组件与代码实现做对比并输出差异报告
• 05执行基于 WCAG 的无障碍检查与组件无障碍评分
• 06兼容 Claude Code、Cursor、Windsurf、Claude Desktop、Codex 和 Gemini CLI

适用场景

• 让 AI 助手直接在 Figma 文件中生成 UI 草图或组件
• 在团队内保持 Figma 变量与代码 token 同步
• 在验收前检查代码组件是否与 Figma 设计一致
• 审查设计系统在命名、token 和无障碍方面的问题

快速上手

1. 1

   从 Figma 帮助中心获取个人访问令牌

2. 2

   使用 npx 将服务器添加到 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
3. 3

   在 Figma Desktop 中导入 Desktop Bridge 插件清单并运行

4. 4

   重启 MCP 客户端以加载配置

使用前须知

• !完整功能需要 Figma Desktop 并连接 Desktop Bridge 插件。
• !远程 SSE 模式只读，无法创建或修改设计。
• !部分功能（如变量）需要 Figma Enterprise 套餐。

收录于专题

标签

常见问题

figma-console-mcp 是什么？

让 AI 助手连接 Figma 的 MCP 服务器，可提取设计变量、创建和编辑设计稿，并进行设计与代码一致性及无障碍检查。 Figma Console MCP 是一个基于 Model Context Protocol 的服务器，让 Claude、Cursor、Codex 等 AI 客户端可以访问 Figma 文件。它能读取变量、组件、样式和文件结构，也能写回 Figma，包括创建 Frame 和组件、管理变量与模式，以及通过运行在 Figma Desktop 中的 Desktop Bridge 插件编辑文本、填充和布局。

figma-console-mcp 可以免费使用吗？用的什么许可证？

figma-console-mcp 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

figma-console-mcp 还在维护吗？

活跃维护中。figma-console-mcp 最近一次提交是在 2026年10月29日。

figma-console-mcp 适合用来做什么？

让 AI 助手直接在 Figma 文件中生成 UI 草图或组件 在团队内保持 Figma 变量与代码 token 同步 在验收前检查代码组件是否与 Figma 设计一致 审查设计系统在命名、token 和无障碍方面的问题

figma-console-mcp 怎么安装和运行？

从 Figma 帮助中心获取个人访问令牌 使用 npx 将服务器添加到 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 在 Figma Desktop 中导入 Desktop Bridge 插件清单并运行 重启 MCP 客户端以加载配置

在哪里获取 figma-console-mcp？

源代码和安装说明在 GitHub 上：https://github.com/southleft/figma-console-mcp