Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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.
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-setup-design-tokensThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create a variable collection + modes + all variables in a single `use_figma` call. This is the
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.
Create, update, rename, delete, and organize Figma variables, collections, and modes with batch operations, scope setting, and code syntax configuration.
Extracts design tokens (colors, spacing, typography) and variables from Figma files via MCP server, generating CSS Custom Properties, TypeScript/JS objects, JSON, Tailwind config, and Style Dictionary formats for design systems.
Share bugs, ideas, or general feedback.
Create a variable collection + modes + all variables in a single use_figma call. This is the
fastest way to stand up a new token system (or a new collection within one). Because it runs as one
atomic script, either everything is created or nothing is (failed scripts apply no changes).
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-manage-variables.figma-import-tokens.scripts/setup-tokens.js: COLLECTION_NAME,
MODES, TOKENS (values keyed by mode name), and optional per-variable SCOPES.use_figma (skillNames: "figma-setup-design-tokens"). It returns
{ collectionId, modes, created, errors }.get_variable_defs or the figma-export-tokens read script, then screenshot if
you also created swatches.figma-import-tokens (which has the alias pass) or
figma-manage-variables. Keep primitives single-mode and put theming on the semantic layer.ALL_SCOPES clutters every property picker. Pass SCOPES for the
surfaces each token belongs to (FRAME_FILL/SHAPE_FILL for backgrounds, TEXT_FILL for text,
GAP for spacing, CORNER_RADIUS for radii, WIDTH_HEIGHT for sizing).