manage-variables-figma — variable / collection / mode CRUD
Incremental, surgical edits to a Figma variable system: create one or many, update values in bulk,
rename, set scopes and code syntax, add/rename modes, and delete. All via use_figma, on any plan.
Skill boundaries
use_figma rules — load the official figma-use skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level await + return (no IIFE, no figma.closePlugin(); console.log is not returned), inputs inlined as const at the top of each script, colors in 0–1 range, load fonts before any text op, await figma.getNodeByIdAsync(...), and atomic errors (a failed script applies nothing — read the error, fix, retry).- From-scratch bootstrap →
setup-design-tokens-figma. Code sync → import-tokens-figma /
export-tokens-figma.
Workflow
- Identify targets. Most ops need IDs. Get
variableId/modeId/collectionId from the
export-tokens-figma read script or get_variable_defs. Collections can also be looked up by
name inside the script.
- Pick the operation from references/variable-ops.md — it has a
complete, copy-paste
use_figma snippet for each: create collection, create variable, batch
create, batch update, rename, set scopes, add/rename mode, delete.
- Run via
use_figma (skillNames: "manage-variables-figma"). For large value updates use
scripts/batch-update-variables.js (10–50× faster than
one-call-per-value).
- Confirm. Every snippet returns the affected IDs/names. Read back with
get_variable_defs to
verify. For deletes, confirm with the user first — removing a collection deletes all its
variables and unbinds anything referencing them.
Key rules
- Colors are 0–1 range. Use
hexToRgb for hex input.
- Always set
scopes on new variables — the default ALL_SCOPES pollutes every picker.
- Set code syntax (
setVariableCodeSyntax('WEB', '--token-name')) so design↔code naming lines up.
- Renames are safe — they preserve values and existing bindings. Deletes are destructive.
- Aliases: bind one variable to another with
v.setValueForMode(modeId, figma.variables.createVariableAlias(targetVar)).
1---2name: manage-variables-figma3description: Create, update, rename, delete, and organize Figma variables, collections, and modes — including fast batch create/update, setting scopes, code syntax, and adding theme modes. Use for incremental variable work: triggers 'create a variable', 'batch update variables', 'add a dark mode to my collection', 'rename this variable', 'set variable scopes', 'delete a variable/collection', 'add a mode'. Works on ANY Figma plan. For a from-scratch system use setup-design-tokens-figma; for code↔Figma sync use import-tokens-figma / export-tokens-figma.4---56# manage-variables-figma — variable / collection / mode CRUD78Incremental, surgical edits to a Figma variable system: create one or many, update values in bulk,9rename, set scopes and code syntax, add/rename modes, and delete. All via `use_figma`, on any plan.1011## Skill boundaries12- **`use_figma` rules** — load the official **`figma-use`** skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level `await` + `return` (no IIFE, no `figma.closePlugin()`; `console.log` is not returned), inputs inlined as `const` at the top of each script, colors in 0–1 range, load fonts before any text op, `await figma.getNodeByIdAsync(...)`, and **atomic errors** (a failed script applies nothing — read the error, fix, retry).13- From-scratch bootstrap → `setup-design-tokens-figma`. Code sync → `import-tokens-figma` /14 `export-tokens-figma`.1516## Workflow17181. **Identify targets.** Most ops need IDs. Get `variableId`/`modeId`/`collectionId` from the19 `export-tokens-figma` read script or `get_variable_defs`. Collections can also be looked up by20 name inside the script.212. **Pick the operation** from [references/variable-ops.md](references/variable-ops.md) — it has a22 complete, copy-paste `use_figma` snippet for each: create collection, create variable, batch23 create, batch update, rename, set scopes, add/rename mode, delete.243. **Run** via `use_figma` (`skillNames: "manage-variables-figma"`). For large value updates use25 [`scripts/batch-update-variables.js`](scripts/batch-update-variables.js) (10–50× faster than26 one-call-per-value).274. **Confirm.** Every snippet returns the affected IDs/names. Read back with `get_variable_defs` to28 verify. For deletes, **confirm with the user first** — removing a collection deletes all its29 variables and unbinds anything referencing them.3031## Key rules32- **Colors are 0–1 range.** Use `hexToRgb` for hex input.33- **Always set `scopes`** on new variables — the default `ALL_SCOPES` pollutes every picker.34- **Set code syntax** (`setVariableCodeSyntax('WEB', '--token-name')`) so design↔code naming lines up.35- **Renames are safe** — they preserve values and existing bindings. Deletes are destructive.36- **Aliases**: bind one variable to another with37 `v.setValueForMode(modeId, figma.variables.createVariableAlias(targetVar))`.
southleft