figma-console-mcp

把 Figma 设计系统变成 AI 能直接调用的接口

figma-console-mcp 是一个把 Figma 设计系统变成 API 的 MCP 服务器,用 TypeScript 编写。它解决的核心问题是:AI 编码工具(如 Claude、Cursor 等)无法直接读取或操作 Figma 文件,导致设计稿与代码之间需要人工搬运。项目通过 MCP 协议把 Figma 的变量、样式、组件、文本等内容暴露成可调用的工具接口,让 AI 能提取设计 token、读取节点结构、创建和修改元素,甚至执行调试命令。核心能力包括:连接 Figma 桌面端或插件桥接、批量导出设计变量与样式、按节点 ID 查询图层信息、在 Figma 中生成新节点,以及运行控制台脚本排查问题。它适合把设计系统接入 AI 工作流,减少手工对照设计稿写代码的重复劳动,让设计规范更自动地流向实现层。

开源 unknown 设计创意
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 2448
维护状态 活跃
是否开源 是
定价模式 unknown

项目预览

项目数据

分类设计创意
开发团队southleft
所属国家
定价模式unknown
价格说明定价信息待确认
访问状态
是否开源是
开源协议MIT
主要语言TypeScript
技术栈/模型ai,design-systems,figma,figma-api,figma-plugins,mcp
GitHub 星标★ 2448
30天Star增速
HF 下载量
上线时间2025-10-05 00:00:00
代码更新—
仓库体积—
本站数据更新—
维护状态活跃
中文支持
访问方式
移动端支持
综合评分
收录时间2026-10-08
浏览次数0

Star 增长趋势

本站每日记录该项目 GitHub 星标变化,观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度:入门 约 10 分钟 部署方式:命令行工具 7 步

环境要求

  • Node.js(NPX / Local Git 模式需要;Cloud Mode 与 Remote SSE 不需要)
  • 一个可用的 Figma 账号(NPX 与 Local Git 模式需手动配置 PAT)
  • 支持 MCP 的 AI 客户端(如 Claude、Cursor 等)
  • 如需写入 Figma:Figma 桌面端(正常启动即可,无需 debug 参数)

安装与启动步骤

  1. 1选择安装方式

    按目标对照官方表格选择:要与 AI 一起创建/修改设计选 NPX 推荐;Web 端 AI 选 Cloud Mode;想贡献代码选 Local Git;只想只读浏览选 Remote SSE。

  2. 2准备 Figma 凭证

    NPX 与 Local Git 模式使用手动 PAT 认证;Cloud Mode 和 Remote SSE 使用 OAuth 自动认证,无需手动配置令牌。

  3. 3克隆仓库(本地模式)

    仅 Local Git / 贡献者模式需要,克隆后按仓库说明安装依赖;NPX、Cloud、Remote SSE 三种方式可跳过此步。

    git clone https://github.com/southleft/figma-console-mcp.git
  4. 4打开 Figma 桌面端

    正常启动 Figma 桌面端即可,README 明确说明不需要任何 debug 启动参数。

  5. 5导入桌面桥插件

    在 Figma 中进入 Plugins → Development → Import plugin from manifest...,选中 figma-console-mcp 目录下的 figma-desktop-bridge/manife

  6. 6运行插件连接

    在你的 Figma 文件中运行该插件,它会通过 WebSocket 自动连接,自动扫描 9223–9232 端口,无需手动指定端口。

  7. 7让 AI 验证连接

    向你的 AI 助手提问“Check Figma status”,返回已连接状态即表示 MCP 与 Figma 通道打通。

关键配置

配置项必填说明示例
PAT是NPX 与 Local Git 模式下手动配置的 Figma 个人访问令牌figd_xxxxxxxxxxxxxxxx
WebSocket 端口范围否桌面桥插件自动扫描的本地端口,无需手动设置9223–9232

如何确认成功

向 AI 提问 “Check Figma status”,确认返回已连接 Figma、工具可用即成功。

常见问题

Q:使用变量功能需要 Figma 企业版吗?

A:不需要。README 的对比表显示 NPX、Cloud Mode、Local Git 三种方式均支持 Variables (no Enterprise)。

Q:只想读取设计数据,最快怎么装?

A:选 Remote SSE,约 2 分钟完成,无需 Node.js、OAuth 自动认证,但只有只读工具子集。

Q:Cloud Mode 需要装 Node.js 吗?

A:不需要。Cloud Mode 面向 Claude.ai、v0、Replit、Lovable 等 Web AI 客户端,配对后提供 96 个工具。

Q:桌面桥插件每次都要重新导入吗?

A:不用。属于一次性导入,之后它会留在 Development plugins 列表里,需要时直接运行即可。

Q:Figma 桌面端要开调试参数吗?

A:不用。README 说明按正常方式启动 Figma Desktop 即可,无任何 debug flags 要求。

注意事项

  • NPX(推荐)与 Local Git 提供全部 121 个工具,Remote SSE 仅只读子集,Cloud Mode 配对后为 96 个工具。
  • 只有 NPX 与 Local Git 需要 Node.js;Cloud Mode 与 Remote SSE 不依赖 Node.js。
  • NPX 方式通过 @latest 自动更新,Local Git 方式需要手动 git pull 更新。
  • 当前版本 v1.40.9 的修复属于服务端更新,无需重新导入 Figma 插件。

核心亮点

  • 通过 MCP 协议直接对接 Claude、Cursor 等 AI 工具,无需自己写胶水代码
  • 能读取 Figma 变量、样式、组件等设计 token,方便生成与设计一致的代码
  • 支持在 Figma 中创建和修改节点,不只是只读提取,可反向写入

不足之处

  • 依赖 Figma 桌面端或插件桥接,环境配置有一定门槛
  • 功能深度受 Figma API 与插件权限限制,复杂交互场景覆盖有限

适用场景

  • 把设计系统的颜色、字体、间距变量同步给 AI 生成主题代码
  • 让 AI 根据 Figma 节点结构直接产出组件代码骨架
  • 在设计评审后批量修改 Figma 中的文案或样式并回写

替代项目

figma-mcp、Figma-Context-MCP

项目介绍

figma-console-mcp 是设计创意领域的开源项目,由 southleft 开发,2025 年首次发布。

在全站 13,916 个收录项目中,它的 GitHub 星标数(2,448)位列前 30%,在设计创意分类的 192 个项目里位列前 15%。

项目目前处于活跃维护状态,最近一次代码更新于 2026-10-02。

它主要面向的使用场景是:把设计系统的颜色、字体、间距变量同步给AI生成主题代码。同类可对比的替代方案包括 figma-mcp、Figma-Context-MCP。

上一篇:simple-ai

下一篇:swiss-design-skill

同类项目推荐

open-design 开源

让 AI 代工做界面,本地跑完随手改

Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ L···

★ 99850 2026-08-09
Excalidraw 开源

开源虚拟白板协作工具

Virtual whiteboard for sketching hand-drawn like diagrams

★ 133649 2026-08-19
morph 开源

用数据直接生成设计、动画和交互可视化

Morph is a free and open-source tool for creating designs, animations or interactive···

★ 127 2026-08-09
ChatGPT-MidJourney-prompt 开源

输入一句话,AI帮你生成Midjourney完整提示词

This is a ChatGPT based prompt generation model for MidJorney. The purpose of this m···

★ 344 2026-08-09