关于 figma-manage-variables
用于定点编辑 Figma 变量和集合的技能,适合维护 Figma 设计令牌的工作流。它提供按操作分类的脚本及验证指引。
主要功能
- 01创建和更新变量
- 02重命名变量与集合
- 03设置范围和代码语法
- 04添加或重命名模式
- 05删除变量或集合
- 06读取值以验证编辑
适用场景
- 01修改 Figma 令牌系统中的单项内容
- 02批量更新变量值
- 03按选择器范围整理变量
MCP 相关
此技能通过 `use_figma` 执行 Figma 操作;README 未说明 MCP 连接。
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ southleft/ figma-console-mcp-skills --skill figma-manage-variables安装后在 Claude Code 中输入/figma-manage-variables确认已加载。
附带文件references/variable-ops.mdscripts/batch-update-variables.js
详细介绍
figma-manage-variables — 变量 / 集合 / 模式的 CRUD 操作
对 Figma 变量系统进行增量式、精准编辑:创建一个或多个变量、批量更新值、重命名、设置作用域和代码语法、添加 / 重命名模式,以及删除。所有操作均通过 use_figma 执行,适用于任何套餐。
技能边界
use_figma规则 — 首先加载官方figma-use技能;它是完整的 Figma Plugin API 参考。这些脚本依赖的要点:使用带顶层await和return的纯 JS(不要使用 IIFE 或figma.closePlugin();console.log不会作为返回值传出),在每个脚本顶部将输入内联为const,颜色值范围为 0–1,在任何文本操作前加载字体,使用await figma.getNodeByIdAsync(...),并遵循原子错误原则(脚本失败时不会应用任何更改——读取错误、修正后重试)。- 从头开始引导 →
figma-setup-design-tokens。代码同步 →figma-import-tokens/figma-export-tokens。
工作流
- 确定目标。 大多数操作都需要 ID。通过
figma-export-tokens读取脚本或get_variable_defs获取variableId/modeId/collectionId。也可以在脚本中按名称查找集合。 - 选择操作,查看 references/variable-ops.md — 其中为每项操作提供了完整且可直接复制粘贴的
use_figma代码片段:创建集合、创建变量、批量创建、批量更新、重命名、设置作用域、添加 / 重命名模式,以及删除。 - 通过
use_figma运行(skillNames: "figma-manage-variables")。批量更新大量值时,请使用scripts/batch-update-variables.js(速度比每次更新一个值快 10–50 倍)。 - 确认。 每个代码片段都会返回受影响的 ID / 名称。使用
get_variable_defs读取并验证。删除操作前,先与用户确认——删除集合会删除其中所有变量,并解除对这些变量的所有引用。
关键规则
- 颜色值范围为 0–1。 十六进制输入请使用
hexToRgb。 - 为新变量始终设置
scopes——默认值ALL_SCOPES会污染每个选择器。 - 设置代码语法(
setVariableCodeSyntax('WEB', '--token-name')),以保持设计与代码中的命名一致。 - 重命名是安全的——会保留值和现有绑定。删除具有破坏性。
- 别名:使用
v.setValueForMode(modeId, figma.variables.createVariableAlias(targetVar))将一个变量绑定到另一个变量。
评论
支持 Markdown