Warp 仓库 Figma 技能详解：Variable & Token API 完整实战指南

本指南以 resources/bundled/mcp_skills/figma/figma-use/references/variable-patterns.md 为核心骨架展开。它隶属于 figma-use 技能体系（SKILL.md），是使用 use_figma MCP 工具在 Figma 文件中通过 Plugin API 创建、绑定、限定作用域和建立别名（alias）变量时的权威模式参考。读完本文，你将掌握：如何创建变量集合（Collection）与模式（Mode）、如何创建 COLOR / FLOAT / STRING / BOOLEAN 四类变量、如何把变量绑定到节点属性（填充、描边、间距、圆角、尺寸、透明度等）、如何正确设置作用域（Scopes）避免污染属性面板、如何用 VARIABLE_ALIAS 让语义 Token 引用原始 Token，以及如何通过 setVariableCodeSyntax 让设计变量与 Web/Android/iOS 代码侧形成一一对应的交接（handoff）关系。

背景：Figma 变量与设计 Token 的关系

在开始看代码之前，先明确一个概念前提：Figma 变量（Variables）在语义上大量重叠于代码库里的设计 Token（tokens），但二者并不完全等价。Figma 变量是"单值"的——颜色、数字、字符串、布尔值各是一个变量；你无法把一条盒阴影塞进单个变量（那是效果样式 Effect Styles 的职责），也无法把一整套字体阶梯塞进变量（那是文本样式 Text Styles 的职责）。这一设计边界在 wwds-variables.md 中有系统说明：

• Collection（集合）：相当于 Figma 中的分组，例如一个名为 "Colors" 的集合，内部可含 "Light" 和 "Dark" 两个模式；
• Mode（模式）：可以是明暗主题，也可以是尺寸、语言（字符串变量）等任意维度；
• Aliasing（别名）：把一个变量指向另一个变量，最典型的场景是语义 Token 指向原始（primitive）Token；
• Code Syntax：Figma 中为代码交接准备的表层，可为每个变量分别设置 WEB、iOS、ANDROID 三套语法，例如 CSS 写法 var(--the-thing) 而不是裸的 --the-thing；
• Scope（作用域）：控制变量在哪些属性选择器中可见，务必设置具体作用域而非默认的 ALL_SCOPES。

本文所有代码都设计为可直接粘贴进 use_figma 调用运行。需要牢记该环境的三个硬性规则（详见 SKILL.md 的 Critical Rules）：用 return 返回数据而不是 console.log()；颜色一律使用 0–1 范围而非 0–255；setBoundVariableForPaint 会返回全新的 paint 对象，必须捕获返回值并重新赋值。

创建变量集合（Variable Collections）与模式（Modes）

集合是变量的顶层容器，一个新建集合总是自带一个名为 "Mode 1" 的默认模式，因此创建后第一步永远是重命名它：

const collection = figma.variables.createVariableCollection("MyCollection");

// 新集合自带 1 个名为 "Mode 1" 的模式——永远要重命名它
collection.renameMode(collection.modes[0].modeId, "Light");

// 添加更多模式（addMode 返回新的 modeId）
const darkModeId = collection.addMode("Dark");
const lightModeId = collection.modes[0].modeId;

模式数量上限与订阅套餐相关： Free/Starter 套餐 = 1 个模式，Professional = 最多 4 个，Organization/Enterprise = 40 个以上。如果需要大量模式，应当拆分到多个集合中。这一点在 token-creation.md 中同样被强调：在 Starter 套餐上调用 addMode("Dark") 会抛出 "Limited to N modes only" 错误——从源码看，这是 figma-generate-library 生成流程中需要专门捕获并让用户决定如何继续的已知异常。

从仓库内的实际脚本 createVariableCollection.js 可以看到生产级封装：它接收 (name, modeNames, runId)，把第一个模式名通过 renameMode 写入默认模式，其余模式用 addMode 逐个追加，并为集合打上 dsb_key / dsb_run_id 插件数据标签，用于后续幂等清理：

async function createVariableCollection(name, modeNames, runId) {
  if (!modeNames || modeNames.length === 0) {
    throw new Error('createVariableCollection: modeNames must have at least one entry.')
  }
  const collection = figma.variables.createVariableCollection(name)
  collection.setPluginData('dsb_key', `collection/${name}`)
  if (runId) collection.setPluginData('dsb_run_id', runId)

  const modeIds = {}
  const defaultMode = collection.modes[0]
  collection.renameMode(defaultMode.modeId, modeNames[0])
  modeIds[modeNames[0]] = defaultMode.modeId
  for (let i = 1; i < modeNames.length; i++) {
    const newModeId = collection.addMode(modeNames[i])
    modeIds[modeNames[i]] = newModeId
  }
  return { collection, modeIds }
}

这种"先查后建（check-before-create）+ 插件数据打标"的幂等模式，是生成类技能（figma-generate-library/SKILL.md）的通用约定，可以避免脚本重复执行时产生重复集合。

创建四类变量（All Variable Types）

figma.variables.createVariable(name, collection, resolvedType) 创建变量，第二个参数推荐直接传集合对象（传 ID 字符串虽可用但已属废弃用法）：

// COLOR —— 值使用 {r, g, b, a}（全部 0–1 范围，含 alpha 通道）
const colorVar = figma.variables.createVariable("my-color", collection, "COLOR");
colorVar.setValueForMode(modeId, { r: 0.2, g: 0.36, b: 0.96, a: 1 });

// FLOAT —— 间距、圆角、尺寸等数值型
const floatVar = figma.variables.createVariable("my-spacing", collection, "FLOAT");
floatVar.setValueForMode(modeId, 16);

// STRING —— 字体族、字体样式名等任意文本
const stringVar = figma.variables.createVariable("my-font", collection, "STRING");
stringVar.setValueForMode(modeId, "Inter");

// BOOLEAN
const boolVar = figma.variables.createVariable("my-flag", collection, "BOOLEAN");
boolVar.setValueForMode(modeId, true);

易混淆点： 画布上的 Paint 颜色使用 {r, g, b}（无 alpha），而 COLOR 变量的值使用 {r, g, b, a}（含 alpha），两者不要混用。如果是从十六进制字符串转换，仓库脚本 createSemanticTokens.js 中封装了 hexToFigmaColor：支持 #rgb（三位的缩写会展开为 #rrggbb）、#rrggbb、#rrggbbaa 三种写法，每个通道除以 255 映射到 0–1，8 位十六进制时解析出 alpha：

function hexToFigmaColor(hex) {
  let h = hex.replace('#', '')
  if (h.length === 3) {
    h = h.split('').map((c) => c + c).join('')
  }
  const r = parseInt(h.substring(0, 2), 16) / 255
  const g = parseInt(h.substring(2, 4), 16) / 255
  const b = parseInt(h.substring(4, 6), 16) / 255
  const a = h.length === 8 ? parseInt(h.substring(6, 8), 16) / 255 : 1
  return { r, g, b, a }
}

在 token-creation.md 的生成流程中还给出了一个重要的作用域约定：原始（primitive）颜色变量一律设置 v.scopes = []，把它们从所有属性选择器中隐藏——设计师只应看到语义 Token；唯一的例外是半透明覆盖层（带 alpha 的 Black/White），它们需要 ["EFFECT_COLOR"] 以便出现在阴影选择器中。

把变量绑定到节点属性（Binding Variables to Node Properties）

颜色绑定（填充、描边）

setBoundVariableForPaint 会返回一个全新的 paint，必须捕获返回值：

// 先构造基础 paint，绑定变量，再把结果赋回
const basePaint = { type: 'SOLID', color: { r: 0, g: 0, b: 0 } };
const boundPaint = figma.variables.setBoundVariableForPaint(basePaint, "color", colorVar);
node.fills = [boundPaint];

// 只有 SOLID 类型的 paint 支持颜色变量绑定——渐变/图片会抛错

仓库脚本 bindVariablesToComponent.js 展示了更健壮的生产写法：先读取节点已有的 component.fills，若存在则绑定第一个填充并保留其余；若不存在则用默认灰色 { r: 0.5, g: 0.5, b: 0.5 } 构造 SOLID paint 再绑定。描边（strokes）走完全相同的 setBoundVariableForPaint 逻辑。

数值绑定（间距、圆角、尺寸）

setBoundVariable 用于把 FLOAT / STRING / BOOLEAN 变量绑定到节点属性：

// Padding
node.setBoundVariable("paddingTop", spacingVar);
node.setBoundVariable("paddingBottom", spacingVar);
node.setBoundVariable("paddingLeft", spacingVar);
node.setBoundVariable("paddingRight", spacingVar);

// Gap（自动布局间距）
node.setBoundVariable("itemSpacing", gapVar);
node.setBoundVariable("counterAxisSpacing", gapVar);

// 圆角 —— 使用四个独立圆角，而不是 cornerRadius
node.setBoundVariable("topLeftRadius", radiusVar);
node.setBoundVariable("topRightRadius", radiusVar);
node.setBoundVariable("bottomLeftRadius", radiusVar);
node.setBoundVariable("bottomRightRadius", radiusVar);

// 尺寸
node.setBoundVariable("width", sizeVar);
node.setBoundVariable("height", sizeVar);
node.setBoundVariable("minWidth", sizeVar);
node.setBoundVariable("maxWidth", sizeVar);

// 其他
node.setBoundVariable("opacity", opacityVar);
node.setBoundVariable("strokeWeight", strokeVar);

不能用 setBoundVariable 绑定的属性： fontSize、fontWeight、lineHeight——这些需要在文本节点上直接设置（属于 Typography 的范畴，可结合 text-style-patterns.md 使用文本样式实现）。注意 bindVariablesToComponent.js 中 cornerRadius 是直接整体绑定的（组件级快捷路径），但精细控制仍推荐上面按四角逐个绑定的方式。

效果绑定（阴影的颜色与数值）

const effectCopy = JSON.parse(JSON.stringify(node.effects[0]));
const newEffect = figma.variables.setBoundVariableForEffect(effectCopy, "color", colorVar);
// ⚠️ 返回的是 NEW effect —— 必须捕获返回值！
node.effects = [newEffect];
// 合法字段："color"（COLOR），"radius" | "spread" | "offsetX" | "offsetY"（FLOAT）

给 Frame 应用模式

// 该 frame 下所有已绑定的子节点都会按指定模式的值解析
frame.setExplicitVariableModeForCollection(collection, modeId);

如果不调用这一句，所有节点都会使用集合的默认（第一个）模式。这是实现"一键切换明暗主题"的关键 API——正如 token-creation.md 引用的 M3 模式所示：196 个语义颜色变量全部放在单个集合的 8 个模式中，对 frame 切换一次模式即可同时更新所有颜色。

变量作用域（Scopes）：是什么、怎么设

variable.scopes 控制该变量会出现在 Figma 的哪些属性选择器中。默认值是 ["ALL_SCOPES"]，会让变量出现在所有地方——这几乎从来不是你想要的：

variable.scopes = ["FRAME_FILL", "SHAPE_FILL"];  // 仅填充选择器
variable.scopes = ["TEXT_FILL"];                   // 仅文本颜色选择器
variable.scopes = ["GAP"];                         // 仅间距选择器
variable.scopes = ["CORNER_RADIUS"];               // 仅圆角选择器
variable.scopes = [];                              // 从所有选择器隐藏

全部合法取值： ALL_SCOPES、TEXT_CONTENT、CORNER_RADIUS、WIDTH_HEIGHT、GAP、ALL_FILLS、FRAME_FILL、SHAPE_FILL、TEXT_FILL、STROKE_COLOR、STROKE_FLOAT、EFFECT_FLOAT、EFFECT_COLOR、OPACITY、FONT_FAMILY、FONT_STYLE、FONT_WEIGHT、FONT_SIZE、LINE_HEIGHT、LETTER_SPACING、PARAGRAPH_SPACING、PARAGRAPH_INDENT

两条硬性规则：

1. 始终显式设置 scopes——ALL_SCOPES 是默认值但几乎从不是正确选择。完整的"语义角色 → 推荐作用域"映射表见 token-creation.md § Variable Scopes — Complete Reference Table，其中核心约定包括：原始颜色用 [] 隐藏、背景填充用 ["FRAME_FILL", "SHAPE_FILL"]、文本颜色用 ["TEXT_FILL"]、边框用 ["STROKE_COLOR"]、阴影颜色用 ["EFFECT_COLOR"]、间距用 ["GAP"]、圆角用 ["CORNER_RADIUS"]、字号用 ["FONT_SIZE"] 等；注意 ALL_FILLS 是互斥的，它同时覆盖 FRAME_FILL/SHAPE_FILL/TEXT_FILL，且一旦设置就不能再叠加单个 fill 作用域。
2. 创建变量之前，先检查文件里已有的作用域约定——不同文件有不同的命名、作用域与集合结构，尽量匹配既有惯例（见下文"发现既有变量"一节）。

figma-use/SKILL.md 的规则 16 更是把"显式设置 scopes"列进了每次创建变量的强制清单。此外，BOOLEAN 类型不支持 scopes（这是 API 的硬限制，token-creation.md 的 BOOLEAN 示例中明确注释了这一点）。

变量别名（VARIABLE_ALIAS）

一个变量的值可以通过别名引用另一个变量——这正是"语义 Token 引用原始 Token"的落地方式：

// 把某个变量的值设为另一个变量的别名
semanticVar.setValueForMode(modeId, {
  type: 'VARIABLE_ALIAS',
  id: primitiveVar.id
});

当原始值改变时，所有模式下的语义变量会自动更新。 从 wwds-variables.md 可以得到两条重要的决策规则与陷阱：

• 分层决策规则：如果源数据是两层（primitives + semantics），先创建全部原始变量，再创建语义变量并让它们 alias 到原始变量；如果源数据是单层扁平结构，就创建无别名的扁平变量。拿不准时先问。
• 常见坑：重复的变量名不会报错，Figma 会静默创建同名第二个变量，所以创建前务必查重；跨文件别名不受支持，若要 alias 到库变量必须先导入；setValueForMode 传别名时必须使用精确的 { type: 'VARIABLE_ALIAS', id: '<variableId>' } 形状，任何偏差都会静默写入错误值或抛错。

token-creation.md 中给出了更完整的 SDS（Simple Design System）风格实现，并强调两个 API 要点：可以用 figma.variables.createVariableAlias(variable) 接收 Variable 对象并返回 {type:'VARIABLE_ALIAS', id: variable.id}；被别名的变量必须与语义变量具有相同的 resolvedType；语义层永远不要复制原始值，一律 alias。

代码语法（setVariableCodeSyntax）：让变量与代码侧对齐

setVariableCodeSyntax 把 Figma 变量链接回它的代码对应物，每个平台各调用一次：

variable.setVariableCodeSyntax('WEB', 'var(--color-bg-default)');
variable.setVariableCodeSyntax('ANDROID', 'colorBgDefault');
variable.setVariableCodeSyntax('iOS', 'Color.bgDefault');

// 读回：variable.codeSyntax → { WEB: '...', ANDROID: '...', iOS: '...' }

它驱动的是 Dev Mode 的开发者交接体验：当开发者在 Figma Dev Mode 中检查任意绑定了变量的属性时，代码片段会显示 code syntax 名称而不是 Figma 变量名。例如按钮背景绑定到 color/bg/primary，CSS 片段会显示 background: var(--color-bg-primary)；若不设置 code syntax，Dev Mode 只能给出原始十六进制值。

从 Figma 名推导 CSS 名时，要把斜杠和空格都替换成连字符：

// 错误 —— CSS 变量名里残留空格
`var(--${figmaName.replace(/\//g, '-').toLowerCase()})`

// 正确 —— 替换所有空白和斜杠
`var(--${figmaName.replace(/[\s\/]+/g, '-').toLowerCase()})`

// 最佳 —— 直接用源数据中的原始 CSS 变量名，而不是推导名
`var(${token.cssVar})`

关于代码语法还有几个来自 token-creation.md 的关键细节值得引用：

• WEB 语法必须带 var() 包裹：只设 --color-bg-primary（不带 var()）会让 Dev Mode 显示原始十六进制值而不是 CSS 变量引用；
• 每个变量最多设置 3 套语法（WEB / iOS / Android 各一）；仅 Web 项目可只设 WEB；
• 平台推导规则：WEB 用 var(--{css-var-name})；ANDROID 用无包裹的 camelCase（去掉 -- 前缀，如 sdsColorBgPrimary）；iOS 用点号后的 PascalCase（如 Color.SdsColorBgPrimary）；
• 优先使用代码库中真实的 CSS 变量名，推导名只是兜底方案；
• figma-use/SKILL.md 的完整参考文档列表要求：在编写 Plugin API 代码前，先用 plugin-api-standalone.index.md 理解 API 全貌，再按需到 plugin-api-standalone.d.ts 中 grep 相关类型签名。

导入库变量（Importing Library Variables）

来自团队库（而非当前文件）的变量，要用 importVariableByKeyAsync：

// 按 key 导入单个变量
const colorVar = await figma.variables.importVariableByKeyAsync("VARIABLE_KEY");
// 现在可以像本地变量一样使用它
const paint = figma.variables.setBoundVariableForPaint(
  { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, 'color', colorVar
);
node.fills = [paint];

要发现库中可用的变量集合及其变量：

// 列出所有可用的库变量集合
const libCollections = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();
// 每项包含: name, key, libraryName

// 获取某个库集合内的变量
const libVars = await figma.teamLibrary.getVariablesInLibraryCollectionAsync(libCollections[0].key);
// 每项包含: name, key, resolvedType
// 导入你需要的那些：
const imported = await figma.variables.importVariableByKeyAsync(libVars[0].key);

何时导入、何时用本地： 若 variable.remote === true，说明它来自库——如果已导入可直接引用，否则按 key 导入；若 remote === false，它是文件本地的，直接用 getVariableByIdAsync 获取。api-reference.md 的 "Library Variable Import" 一节印证了同一模式，并补充：库样式（Paint/Text/Effect/Grid Style）则走 importStyleByKeyAsync + 各自的 setXxxStyleIdAsync 应用。

发现文件里已有的变量（Discovering Existing Variables）

创建新变量之前，永远先检查文件里已有的变量。 不同文件使用不同的命名约定、作用域模式和集合结构——请匹配既有风格（figma-use/SKILL.md 规则 8 专门强调这一点）。

列出集合及模式信息

const collections = await figma.variables.getLocalVariableCollectionsAsync();
const results = collections.map(c => ({
  name: c.name,
  id: c.id,
  varCount: c.variableIds.length,
  modes: c.modes.map(m => ({ name: m.name, id: m.modeId }))
}));
return results;

检查已有变量的作用域模式

const collections = await figma.variables.getLocalVariableCollectionsAsync();
const scopeGroups = {};
for (const c of collections) {
  for (const id of c.variableIds) {
    const v = await figma.variables.getVariableByIdAsync(id);
    const key = JSON.stringify(v.scopes);
    if (!scopeGroups[key]) scopeGroups[key] = [];
    scopeGroups[key].push(v.name);
  }
}
return scopeGroups;

构建 name→variable 查找表以便复用

const varByName = {};
for (const v of await figma.variables.getLocalVariablesAsync()) {
  varByName[v.name] = v;
}

// 按名称绑定到既有变量——不再需要写十六进制值
function bindFill(node, varName) {
  const v = varByName[varName];
  if (!v) throw new Error(`Variable not found: ${varName}`);
  const paint = figma.variables.setBoundVariableForPaint(
    { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, 'color', v
  );
  node.fills = [paint];
}

只为文件中没有匹配项的 Token 创建新变量。 构建查找表后与所需 Token 做差集，只对差额部分执行创建——这与 token-creation.md 的"查重后创建（check-before-create）"幂等策略一脉相承，也规避了"重复变量名静默创建"的坑。

列出集合的完整变量详情

异步 API 会返回更丰富的数据，包括每个变量的 code syntax 与 scopes：

/**
 * 列出当前 Figma 文件中定义的所有本地变量集合，
 * 包括其模式与变量的元数据。
 *
 * @returns {Promise<Array<{
 *   name: string,
 *   id: string,
 *   modes: Array<[name: string, modeId: string]>,
 *   variables: Array<[name: string, id: string, codeSyntax: object, scopes: string[]]>
 * }>>}
 */
async function listVariableCollectionsAndVariables() {
  const collections = await figma.variables.getLocalVariableCollectionsAsync();
  const results = [];
  for (const collection of collections) {
    const vars = [];
    for (const id of collection.variableIds) {
      const v = await figma.variables.getVariableByIdAsync(id);
      vars.push([v.name, v.id, v.codeSyntax, v.scopes]);
    }
    results.push({
      name: collection.name,
      id: collection.id,
      modes: collection.modes.map(m => [m.name, m.modeId]),
      variables: vars
    });
  }
  return results;
}

完整可运行脚本：

const results = await listVariableCollectionsAndVariables();
return results;

设置与移除代码语法（Setting and Removing Code Syntax）

注意：必须在变量所在的文件中执行：

/**
 * 为某个变量在指定平台设置代码语法。
 *
 * @param {string} variableId
 * @param {'WEB'|'ANDROID'|'iOS'} platform
 * @param {string} syntax
 */
async function setVariableCodeSyntax(variableId, platform, syntax) {
  const variable = await figma.variables.getVariableByIdAsync(variableId);
  variable.setVariableCodeSyntax(platform, syntax);
}

/**
 * 移除某个变量在一个或多个平台上的代码语法。
 *
 * @param {string} variableId
 * @param {Array<'WEB'|'ANDROID'|'iOS'>} platforms —— 默认移除全部三个
 */
async function removeVariableCodeSyntax(variableId, platforms = ["WEB", "ANDROID", "iOS"]) {
  const variable = await figma.variables.getVariableByIdAsync(variableId);
  for (const platform of platforms) {
    variable.removeVariableCodeSyntax(platform);
  }
}

/**
 * 为某个变量在指定模式设置值。
 * 别名时 value 必须为: { type: 'VARIABLE_ALIAS', id: '<variableId>' }
 *
 * @param {string} variableId
 * @param {string} modeId
 * @param {string|number|boolean|RGB|RGBA|{type: 'VARIABLE_ALIAS', id: string}} value
 */
async function setVariableValueForMode(variableId, modeId, value) {
  const variable = await figma.variables.getVariableByIdAsync(variableId);
  variable.setValueForMode(modeId, value);
}

效果样式（Effect Styles）——阴影的正确归宿

阴影无法存成变量，必须使用效果样式。本节模式与 effect-style-patterns.md 一致，后者还补充了列出本地效果样式（figma.getLocalEffectStylesAsync()）、从库导入（importStyleByKeyAsync）以及按节点名匹配批量应用（node.effectStyleId = styleId）的完整做法。

const shadow = figma.createEffectStyle();
shadow.name = "Shadow/Subtle";
shadow.effects = [{
  type: "DROP_SHADOW",
  color: { r: 0, g: 0, b: 0, a: 0.06 },
  offset: { x: 0, y: 2 },
  radius: 8,
  spread: 0,
  visible: true,
  blendMode: "NORMAL"
}];

// 应用到节点
frame.effectStyleId = shadow.id;

如果确实需要"阴影的某个数值跟随变量"，则把效果样式的字段绑定到变量上——这正是本文前面"效果绑定"一节中 setBoundVariableForEffect 的用途：样式存阴影本身，变量驱动其颜色/半径/偏移，两者配合使用。生成流程中更完整的阴影体系（SDS 的 Shadow/Subtle|Medium|Strong 与 M3 的 Elevation/1|2|3 双阴影模式）可在 token-creation.md 的 Effect Styles 一节找到可复制的完整实现。

常见陷阱速查

结合 wwds-variables.md 与本文全部代码，把最常见的坑汇总如下：

陷阱	正确做法
createVariableCollection 自带默认 "Mode 1"	创建后立即 renameMode（或删除后自建），不要从零手工建
重复变量名静默创建第二个	创建前用 getLocalVariablesAsync() 查重
别名目标必须在同一文件	跨文件别名不被 Plugin API 支持，先 importVariableByKeyAsync 再 alias
setValueForMode 别名形状不对	严格使用 { type: 'VARIABLE_ALIAS', id: '<variableId>' }
setBoundVariableForPaint 忘捕获返回值	它返回新 paint，必须 node.fills = [boundPaint]
渐变/图片 paint 上绑颜色变量	只有 SOLID paint 支持颜色绑定
忘记设置 scopes	默认 ALL_SCOPES 污染所有属性选择器，始终显式设置
WEB 代码语法漏写 var()	必须写 var(--name) 完整形式，否则 Dev Mode 显示原始值
用 0–255 传颜色	所有颜色通道都是 0–1 范围，需除以 255
BOOLEAN 变量设 scopes	BOOLEAN 不支持 scopes，跳过即可

最后，建议把本文的模式与 figma-use/SKILL.md 的增量工作流（incremental workflow）配合使用：先只读探查文件，再每次 use_figma 只做一件事，每次调用都 return 创建/变更的节点 ID，并在关键里程碑后用 get_metadata / get_screenshot 校验。这样，从"建集合 → 建原始变量 → 建语义别名 → 绑定到组件 → 验证"的整条设计 Token 落地链路就能稳定、可审计地推进。