southleft/figma-console-mcp-skills

figma-manage-variables

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 figma-setup-design-tokens; for code↔Figma sync u…

First seen Jun 1, 2026

Installation

$ npx skills add southleft/figma-console-mcp-skills --skill figma-manage-variables

Summary

  • 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 figma-setup-design-tokens; for code↔Figma sync use figma-import-tokens / figma-export-tokens.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from southleft/figma-console-mcp-skills · top by installs.

npx skills add southleft/figma-console-mcp-skills

Browse all from southleft/figma-console-mcp-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 80
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,002 B
  • docs SUMMARY.md 578 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 95 installs

SKILL.md

figma-manage-variables — 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 → figma-setup-design-tokens. Code sync → figma-import-tokens /

figma-export-tokens.

Workflow

  1. Identify targets. Most ops need IDs. Get variableId/modeId/collectionId from the

figma-export-tokens read script or getvariabledefs. Collections can also be looked up by name inside the script.

  1. Pick the operation from [references/variable-ops.md](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.

  1. Run via use_figma (skillNames: "figma-manage-variables"). For large value updates use

[scripts/batch-update-variables.js](scripts/batch-update-variables.js) (10–50× faster than one-call-per-value).

  1. Confirm. Every snippet returns the affected IDs/names. Read back with getvariabledefs 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)).