mcpField
F
figma-manage-variables

figma-manage-variables

github.com/southleftDesign & UI94132 installsUpdated 10w ago
Repository

About figma-manage-variables

A skill for making targeted changes to Figma variables and collections, intended for workflows that maintain design tokens in Figma. It provides operation-specific scripts and verification guidance.

Key features

  1. 01Create and update variables
  2. 02Rename variables and collections
  3. 03Set scopes and code syntax
  4. 04Add or rename modes
  5. 05Delete variables or collections
  6. 06Verify edits by reading values

Use cases

  1. 01Apply a small change to a Figma token system
  2. 02Bulk-update variable values
  3. 03Organize variables for specific picker scopes

MCP support

This skill runs Figma operations through `use_figma`; the README does not describe an MCP connection.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/southleft/figma-console-mcp-skills --skill figma-manage-variables

After installing, type/figma-manage-variablesin Claude Code to confirm it loaded.

Bundled filesreferences/variable-ops.mdscripts/batch-update-variables.js

Details

From the project README

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 get_variable_defs. Collections can also be looked up by name inside the script.
  2. 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.
  3. Run via use_figma (skillNames: "figma-manage-variables"). For large value updates use scripts/batch-update-variables.js (10–50× faster than one-call-per-value).
  4. 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)).

Comments

Markdown supported