用途:读取 Figma 文件中的全部本地变量,并生成设计令牌文件。规范输出为 DTCG(W3C Design Tokens Community Group JSON),CSS、Tailwind、SCSS、TS、JSON 等格式由其派生。相比直接调用 REST 导出,Figma 的 Variables REST API 仅限 Enterprise(Starter/Pro/Org 会返回 403),本技能通过 use_figma 走 Plugin API,因此所有套餐可用,并能解析别名与多模式值。
主要能力:读取变量树(含十六进制颜色、已解析的别名引用、作用域、代码语法);确定性转换,处理按类型单位(opacity/line-height 无单位,spacing/radius 用 px)、多模式输出(CSS 与 Tailwind v4 输出 :root + .dark/[data-theme];TS/JSON 输出 {mode: value};SCSS 后缀模式;DTCG 保留在 $extensions)、别名转 var()/{ref}、字重名称转数字、DTCG 往返元数据,并对 slug 冲突与非数字字重发出警告。
使用方式:先加载官方 figma-use 技能;通过 use_figma 运行 scripts/read-variables.js(skillNames: "figma-export-tokens"),将输出保存为 variables.json;再用 Node 18+ 运行转换器:node scripts/convert-tokens.mjs variables.json --format dtcg --out tokens/。--format 可选 dtcg(默认)、css-vars、tailwind-v4、tailwind-v3、scss、ts-module、json-flat、json-nested、style-dictionary-v3、tokens-studio;另有 --prefix、--modes、--collection 参数。
适用场景:需要把 Figma 变量同步为代码侧设计令牌的前端与设计系统工作流。
限制:转换器需终端环境(Claude Code、Claude Desktop 的 Code 标签、Cursor、Codex、Gemini CLI);纯桌面/网页聊天无 shell 时需自行在本地运行,或仅接受 DTCG 的尽力内联转换。style-dictionary-v3 与 tailwind-v3 仅用主模式。大型系统建议先按集合名缩小读取范围;跨集合别名需一起导出才能解析。反向(代码→Figma 变量)请用 figma-import-tokens 技能。