SuperAPI AI 工具集

figma-setup-design-tokens

设计与创作

查看项目

更新于 10-16 00:20

技能介绍

用途:在 Figma 中一次性原子化地搭建完整的设计令牌(design token)系统,创建变量集合、集合模式(例如 Light/Dark)以及全部变量。这是快速建立新令牌系统或新集合的方式;由于以单个原子脚本运行,要么全部创建成功,要么什么都不创建(脚本失败不应用任何更改)。

主要能力:一次 use_figma 调用完成集合、模式与变量创建,返回 { collectionId, modes, created, errors };支持为每个变量设置 SCOPES;可通过 get_variable_defs 或 figma-export-tokens 读取脚本校验,若同时创建色板还可截图。

使用方式:先确定 v1 范围,列出集合名称、模式(第一个为默认)及带各模式值的完整令牌集并锁定;在 scripts/setup-tokens.js 中填写常量 COLLECTION_NAME、MODES、TOKENS(按模式名索引的值)以及可选的每变量 SCOPES;通过 use_figma(skillNames: "figma-setup-design-tokens")运行。脚本依赖官方 figma-use 技能(Figma Plugin API 参考),要点包括:纯 JS 加顶层 await 与 return(不用 IIFE,不调用 figma.closePlugin(),console.log 不返回)、输入以 const 内联在脚本顶部、颜色为 0–1 范围、文本操作前先加载字体、使用 await figma.getNodeByIdAsync(...)、错误原子化(失败不应用任何更改,读错误后修复重试)。

适用场景与限制:适合新建令牌系统或新集合;对已有系统的增量 CRUD/批量编辑应使用 figma-manage-variables,从代码令牌文件同步应使用 figma-import-tokens。两级系统建议先用本技能创建 primitives(原始值),再用 figma-import-tokens(含别名处理)或 figma-manage-variables 创建引用它们的语义令牌,primitives 保持单模式、主题化放在语义层。默认 ALL_SCOPES 会使属性选择器杂乱,建议按用途传入 SCOPES(背景用 FRAME_FILL/SHAPE_FILL,文本用 TEXT_FILL,间距用 GAP,圆角用 CORNER_RADIUS,尺寸用 WIDTH_HEIGHT)。每个集合只做一次 bootstrap,多个集合需多次运行。