# figma-console-mcp — Figma Design System via MCP > figma-console-mcp exposes your Figma design system as MCP tools (100+ in NPX mode). Verified 1,671★; setup is ~5–10 minutes with a Figma token. ## Install Merge the JSON below into your `.mcp.json`: ## Quick Use ```bash # Create a Figma personal access token (starts with figd_...) claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest # Then ask your agent to extract variables/components or diff versions from your Figma file. ``` ## Intro figma-console-mcp exposes your Figma design system as MCP tools (100+ in NPX mode). Verified 1,671★; setup is ~5–10 minutes with a Figma token. **Best for:** Design+dev teams who want agents to extract tokens/components and debug UI drift **Works with:** Claude Code, Cursor, Windsurf, Claude Desktop, any MCP client (NPX/Cloud/Remote SSE) **Setup time:** 5-10 minutes ### Key facts (verified) - GitHub: 1671 stars · 193 forks · pushed 2026-05-13. - License: MIT · owner avatar + repo URL verified via GitHub API. - README-verified entrypoint: `npx -y figma-console-mcp@latest`. ## Main - Use NPX/Local Git mode when you need write access (create/modify frames/components) and the full 100+ tool set as documented in README. - Treat it as design-to-code glue: extract variables/styles, generate changelogs, and run accessibility scans to reduce UI drift between Figma and code. - If you only need read-only exploration, README documents Remote SSE mode (~2 minutes) with a smaller tool surface. ### Source-backed notes - README states NPX/Local Git mode exposes 100+ tools; Remote SSE is read-only with a smaller subset. - README includes a Claude Code setup example using `claude mcp add ... -- npx -y figma-console-mcp@latest` and a Figma access token. - README highlights capabilities like version history, diffs, markdown changelogs, and accessibility scanning (WCAG checks). ### FAQ - **Do I need Figma Desktop?**: Yes for write workflows — README recommends Figma Desktop for full capabilities; web-only has limits. - **Which setup is fastest?**: README lists Remote SSE as ~2 minutes for read-only exploration. - **Is it only for extraction?**: No — README includes creation/editing tools and accessibility scanning in NPX/Local modes. ## Source & Thanks > Source: https://github.com/southleft/figma-console-mcp > License: MIT > GitHub stars: 1671 · forks: 193 --- ## Quick Use ```bash # Create a Figma personal access token (starts with figd_...) claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest # Then ask your agent to extract variables/components or diff versions from your Figma file. ``` ## Intro figma-console-mcp 把 Figma 设计系统变成 MCP 工具（NPX 模式 100+）。已验证 1,671★；准备 Token 后约 5–10 分钟可接入 Claude/Cursor。 **Best for:** 想让 agent 抽取设计 token/组件并定位 UI 偏差的设计+研发团队 **Works with:** Claude Code、Cursor、Windsurf、Claude Desktop 与任意 MCP 客户端（NPX/Cloud/Remote SSE） **Setup time:** 5-10 minutes ### Key facts (verified) - GitHub：1671 stars · 193 forks；最近更新 2026-05-13。 - 许可证：MIT；作者头像与仓库链接均已通过 GitHub API 复核。 - README 中核对过的入口命令：`npx -y figma-console-mcp@latest`。 ## Main - 需要写入（创建/修改 frame、组件）就用 README 的 NPX/Local Git：工具最全（100+）。 - 把它当作设计到代码的桥：抽取 variables/styles、生成变更日志、做可访问性扫描，降低 Figma 与代码的偏差。 - 只读探索场景可用 README 的 Remote SSE（约 2 分钟）——能力更少但接入最快。 ### Source-backed notes - README 写明：NPX/Local Git 模式提供 100+ 工具；Remote SSE 为只读且工具子集更小。 - README 给出 Claude Code 的配置示例：`claude mcp add ... -- npx -y figma-console-mcp@latest` 并使用 Figma access token。 - README 强调版本历史、diff、生成 markdown 变更日志，以及 WCAG 可访问性检查等能力。 ### FAQ - **必须装 Figma Desktop 吗？**：写入类工作流通常需要。README 推荐使用 Figma Desktop 以获得完整能力。 - **最快的接入方式是什么？**：README 标注 Remote SSE 约 2 分钟即可只读探索。 - **只能做抽取吗？**：不是。README 在 NPX/Local 模式下包含创建/编辑与可访问性扫描等能力。 ## Source & Thanks > Source: https://github.com/southleft/figma-console-mcp > License: MIT > GitHub stars: 1671 · forks: 193 --- Source: https://tokrepo.com/en/workflows/figma-console-mcp-figma-design-system-via-mcp Author: MCP Hub