Figma Console MCP 双向 Token 同步完全指南DTCG 格式如何实现 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-mcp为什么你需要关注 Figma Console MCP 的 Token 同步Figma Console MCP是一款把设计系统变成 API 的开源 MCP 服务器它让 AI 助手如 Claude、Cursor能够直接连接 Figma读取变量、创建组件、管理设计令牌Design Tokens并实现Figma ⇄ 代码双向 Token 同步——将 Figma 变量导出为 DTCG 标准格式再把代码端的修改无损回传到 Figma一套工具替代 Style Dictionary 和 Tokens Studio 的导出管道。如果你每天都在手动复制粘贴 hex 色值、反复对齐 Figma 里的变量和代码里的 CSS这篇文章会帮你彻底摆脱这种重复劳动。传统管道有多痛Style Dictionary 只能单向导出传统的工作流是这样的设计师在 Figma 里定义变量 → 手动导出 JSON → Style Dictionary 转换成 CSS/SCSS/Tailwind → 开发者使用。这条管道有三个痛点痛点后果单向流动代码端改了色值Figma 里的变量失联两边各自为政手动导出每次设计师改动都要人工触发容易漏同步无身份标识导出再导入时无法识别哪个 token 对应哪个变量重命名就会创建重复项Figma Console MCP用一对工具解决了全部问题figma_export_tokens把 Figma 变量导出为 DTCG JSON 等10 种格式CSS 变量、Tailwind v3/v4、SCSS、TypeScript、JSON、Style Dictionary v3、Tokens Studio 等figma_import_tokens把代码端的 DTCG 修改完整应用回 Figma——更新值、创建缺失的集合与变量、按 ID 匹配重命名、写入真正的变量别名删除则严格受策略门控实现代码位于 tokens-tools.ts工具说明文档见 docs/tools.md。核心枢纽DTCG 标准格式是什么DTCGDesign Tokens Community Group是 W3C 设计令牌社区组制定的开放标准用结构化 JSON 描述颜色、尺寸、圆角、字体等设计令牌例如{ color: { primary: { $type: color, $value: #4085F2 } } }在 Figma Console MCP 的架构中DTCG JSON 是唯一的枢纽格式canonical pivot formatFigma 变量 ──导出──▶ DTCG JSON ──转换──▶ CSS / SCSS / Tailwind / TS ... ▲ │ └──────导入回传◀─────────┘所有其他 9 种输出格式都由 DTCG 派生见 formatters/dtcg.ts而导入方向也只完整支持 DTCG——一次标准化处处可用且永不丢失信息。双向同步原理三个关键机制无损回传并非简单的文件覆盖引擎内部有三道保障1️⃣ 往返元数据Round-trip Metadata导出的每个 token 都会在$extensions[figma-console-mcp]中记录 Figma 的variableId和collectionId外加lastSyncedValue同步时快照与lastSyncedAt同步时间。重命名不产生重复项两侧改名后按 ID 精确匹配永远不会创建孤儿变量冲突可检测导入时对比快照值能发现Figma 和代码同时改了同一个 token的情况2️⃣ 差异感知应用Diff-aware Apply导入默认采用strategy: merge策略只应用增量阶段动作示例toUpdate批量更新已有变量的值含别名重定向设计师在 CSS 里改了一个 hex 值 → 仅 1 次 Figma 更新而非全量重写toCreate创建缺失的集合与变量字面值先创建别名第二轮创建确保引用目标已存在toDelete删除 Figma 中多余的变量仅在strategy: replace时才执行默认保留并仅报告匹配优先级为Figma 变量 ID → 精确 token 路径 → 值指纹。测试用例覆盖了 700 token 设计系统的端到端回传见 tokens.test.ts。3️⃣ 两种 DTCG 方言Dialect兼容新旧工具链方言颜色写法适用场景legacy默认hex 字符串#4085F2Style Dictionary v4、Tokens Studio兼容最大化2025对象形式{ colorSpace: srgb, components: [...] }Style Dictionary v5 及 2025.10 规范工具链方言选择逻辑见 dialect.ts。关键点导入方向无条件接受两种方言——2025的颜色对象和legacy的 hex 字符串会被规范化到同一精度后比较所以新旧格式混用也不会误判为发生了变化。写入安全网默认拒绝危险操作新手最担心的是AI 会不会把我的 token 文件改坏。Figma Console MCP 的默认策略是宁可不写也不写错✅默认 dry-run检测到变化后首次调用只预览差异计划确认后再真正写入✅拒绝覆盖手加内容若覆盖已有 DTCG 文件会删掉它不管理的 token比如你手动加的工具直接拒绝写入并说明原因✅防错文件保护每个导出文件都记录了来源 Figma 文件DTCG 中的figmaFileKey字段。如果当前打开的是另一个 Figma 文件导出会被拒绝——避免从错误的文件导出的数据覆盖你的 token✅冲突三策略onConflict: ask默认暂停并报告、figma-wins、code-wins、skip如何快速上手三步完成配置第一步让工具零参数运行。在项目根目录创建tokens.config.json它会像tsconfig.json一样被自动发现向上逐级查找后续调用工具时无需再传任何参数{ figmaFile: 你的Figma文件链接或Key, source: { dir: src/styles/tokens, canonical: dtcg }, generated: [ { format: dtcg }, { format: css-vars } ] }完整字段说明见 config.ts。第二步告诉 AI 导出一套 token。直接说把我的 Figma 变量导出为 DTCG 和 CSS 变量即可——AI 会调用figma_export_tokens若未检测到配置文件它会先给你一份脚手架建议。第三步回传代码端修改。在代码里改了某个色值后说把 token 文件同步回 Figmafigma_import_tokens会先给出 dry-run 差异报告你确认后一键应用。小贴士figma_setup_design_tokens工具还能通过 DTCG 花括号引用如{color.blue.600}一次调用原子性地创建集合 模式 变量适合从零搭建令牌体系。进阶玩法从代码反向构建设计系统Figma Console MCP 不止服务于设计驱动的团队。它还有 7 个figma_ds_*本地工具可以扫描现有生产代码库把散落其间的样式挖成带来源标注的 DTCG token支持 CSS 变量、SCSS、Tailwind 配置、shadcn HSL 等自动生成设计系统包最后用figma_import_tokens回传进 Figma——完成一个完整的代码 → 设计系统 → Figma闭环见 design-system-extraction-tools.ts。常见问题FAQQ1DTCG 和 Style Dictionary 是什么关系DTCG 是开放标准Style Dictionary 是具体的转换工具。Figma Console MCP 直接以 DTCG 为枢纽把转换内置到 10 种格式的输出里不再需要中间再跑一次 Style Dictionary 管道。Q2会删除我在 Figma 里手动创建的变量吗不会。删除操作严格门控在strategy: replace之后默认的 merge 策略只会保留并报告 Figma 独有的变量。Q3Cloud Mode网页端 AI能用吗可以。figma_export_tokens在云端模式支持返回内联内容本地模式则支持配置自动发现和磁盘写入。完整工具清单与模式差异见 docs/tools.md 和 docs/architecture.md。Q4为什么默认方言是 legacy 而不是最新的 2025因为字节级兼容legacy 输出与旧版本完全一致下游已有工具Style Dictionary v4、Tokens Studio零成本接入。新项目若使用 Style Dictionary v5可在配置中设置dtcgDialect: 2025享受对象化颜色由 Figma 全精度浮点直接构建而非从量化 hex 反推。总结一张图看懂 Figma⇄代码无损回传① 导出 Figma 变量 ──▶ DTCG JSON含 variableId 往返元数据 └─▶ CSS / Tailwind / SCSS / TS10 种格式 ② 修改 设计师改 Figma / 开发者改代码两边独立演进 ③ 同步 diff 比对ID → 路径 → 值指纹三级匹配 ④ 安全应用 dry-run 预览 → merge 增量写入 / replace 全量覆盖 ⑤ 结果 两边 token 永远同构重命名、别名、多模式全部保留Figma Console MCP 的双向 Token 同步把设计令牌同步从手动搬运的体力活变成AI 一句话完成的确定性流程。核心就三点DTCG 作为无损枢纽格式、variableId 往返元数据实现精确匹配、默认保守的写入安全策略——这正是它能替代 Style Dictionary 管道的底气所在。【免费下载链接】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），仅供参考