SuperAPI AI 工具集

setup-design-tokens-figma

设计与创作

查看项目

更新于 10-16 01:28

技能介绍

用途:在 Figma 中快速引导建立一套全新的设计令牌(design token)系统,或在既有系统中新建一个变量集合。核心特点是原子化执行——整个脚本作为一次 use_figma 调用运行,失败时不应用任何更改,避免出现半成品状态。

主要能力:一次调用同时创建变量集合、集合的多种模式(第一种模式为默认),以及全部变量及其按模式区分的取值,并可选择为每个变量指定作用域(SCOPES)。运行后返回 collectionId、modes、created、errors。

使用步骤:一、先确定 v1 范围,列出集合名称、模式列表(第一个为默认)以及完整令牌集合与各模式取值,写脚本前锁定,便于后续减少修改。二、在 scripts/setup-tokens.js 中填写常量 COLLECTION_NAME、MODES、TOKENS(按模式名索引的取值)以及可选的每变量 SCOPES。三、以 skillNames: "setup-design-tokens-figma" 通过 use_figma 运行。四、用 get_variable_defs 或 export-tokens-figma 读取脚本校验,如同时创建了色板可截图确认。

规则要点:需先加载官方 figma-use 技能,使用纯 JS 顶层 await 与 return,不用 IIFE、不调用 figma.closePlugin(),console.log 不会被返回;输入以内联 const 写在脚本顶部;颜色使用 0–1 范围;任何文本操作前先加载字体;使用 await figma.getNodeByIdAsync(...);脚本出错即原子失败,需读错误、修复、重试。

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

其他限制:资料未提供收费、价格、平台支持范围等信息。