Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Create, update, rename, delete, and organize Figma variables, collections, and modes with batch operations, scope setting, and code syntax configuration.
npx claudepluginhub southleft/figma-console-mcp-skills --plugin figma-console-mcp-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/figma-console-mcp-skills:figma-manage-variablesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Incremental, surgical edits to a Figma variable system: create one or many, update values in bulk,
Bootstraps a complete Figma design-token system in one atomic step: creates a variable collection, modes, and all variables with per-mode values. Use when starting a token system from scratch.
Syncs design tokens between code and Figma using Variables API or Tokens Studio plugin. Use when establishing Figma-to-code workflows, exporting Figma tokens, or setting up design-development handoff.
Orchestrates multi-phase Figma design system builds from code, creating variables, tokens, and component libraries with variant bindings and theming.
Share bugs, ideas, or general feedback.
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.
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).figma-setup-design-tokens. Code sync → figma-import-tokens /
figma-export-tokens.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.use_figma snippet for each: create collection, create variable, batch
create, batch update, rename, set scopes, add/rename mode, delete.use_figma (skillNames: "figma-manage-variables"). For large value updates use
scripts/batch-update-variables.js (10–50× faster than
one-call-per-value).get_variable_defs to
verify. For deletes, confirm with the user first — removing a collection deletes all its
variables and unbinds anything referencing them.hexToRgb for hex input.scopes on new variables — the default ALL_SCOPES pollutes every picker.setVariableCodeSyntax('WEB', '--token-name')) so design↔code naming lines up.v.setValueForMode(modeId, figma.variables.createVariableAlias(targetVar)).