Run any Skill in Manus with one click

figma-library-variables

Stars62

Forks2

UpdatedJune 1, 2026 at 20:55

Discover and import design tokens from SUBSCRIBED Figma team libraries into the current file. Use when the user wants to reuse tokens that live in a shared library: triggers 'list library variables', 'what tokens are in our shared library', 'import a variable from our design system library', 'pull in the brand color token from the library'. Works on ANY plan via the Plugin API teamLibrary methods. For LOCAL variables use figma-export-tokens / figma-manage-variables.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

southleft

southleft/figma-console-mcp-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

3 files

SKILL.md

readonly

name	figma-library-variables
description	Discover and import design tokens from SUBSCRIBED Figma team libraries into the current file. Use when the user wants to reuse tokens that live in a shared library: triggers 'list library variables', 'what tokens are in our shared library', 'import a variable from our design system library', 'pull in the brand color token from the library'. Works on ANY plan via the Plugin API teamLibrary methods. For LOCAL variables use figma-export-tokens / figma-manage-variables.
disable-model-invocation	false

figma-library-variables — discover & import team-library variables

Browse the variables published by libraries the current file subscribes to, then import the ones you need. Imported variables get a local id that behaves like any local variable (bind it, read it, reference it).

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).
Local (non-library) variables → figma-export-tokens, figma-manage-variables.

Workflow

Discover. Run scripts/list-library-variables.js via use_figma (skillNames: "figma-library-variables"). Optionally set the LIBRARY_NAME / COLLECTION_NAME / TYPE filters. It returns each subscribed collection and the key of every variable in it.
Import. Put the variable key(s) into scripts/import-library-variable.js and run it. It returns the new localId for each. Re-importing is idempotent (same local id).
Use. Bind the imported variable to node properties or reference it from local semantic tokens (see figma-use / figma-manage-variables for binding).

Notes

Only subscribed libraries appear. If a collection is missing, enable the library in the file's library settings first (a manual Figma step).
getVariablesInLibraryCollectionAsync takes the collection key, not its id.
Library variables are read-only references to the source — edit values in the library file, not here.

More from this repository

same repository

figjam-create-content

southleft/figma-console-mcp-skills

Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph. Use when the user wants to build or edit a FigJam board element-by-element. Triggers: 'add stickies to FigJam', 'create a flowchart/diagram in FigJam', 'connect these nodes', 'make a section/table/code block in FigJam', 'auto-arrange the board', 'read what's on the FigJam board', 'map the connections'. More granular than the native generate_diagram (which produces a whole diagram in one shot). FigJam files only (figma.editorType === 'figjam'). Requires the Figma Desktop app (Plugin API).

2026-06-0162

figma-analyze-component-set

southleft/figma-console-mcp-skills

Analyze a Figma COMPONENT_SET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating an interactive component from a Figma variant set — triggers: 'analyze this component set', 'turn these variants into CSS states', 'generate a button/input/checkbox from Figma variants', 'what changes between the hover and default state', 'map Figma variants to component props', 'extract the state machine for this component'. Resolves bound variables to token names. NOT covered by the native MCP's get_design_context/get_metadata, which don't give you a variant-axis→CSS-state machine.

2026-06-0162

figma-annotations

southleft/figma-console-mcp-skills

Read and write designer annotations on Figma nodes — node-level design specs that pin properties (fills, width, fontSize, etc.) and carry plain or markdown notes. Use when the user wants to document or inspect interaction specs, animation timings, easing, accessibility requirements, or implementation notes attached directly to a node. Triggers: 'add an annotation', 'annotate this node/component', 'read the annotations on…', 'what specs are pinned to this element', 'list annotation categories', 'document the focus behavior on this button in Figma'. Annotations are distinct from comments (they pin to design properties) and from the description field. Requires the Figma Desktop app (Plugin API).

2026-06-0162

figma-arrange-component-set

southleft/figma-console-mcp-skills

Organize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and a titled white container. Use when a variant set is a messy pile and you want a presentable, documentation-ready layout — triggers: 'arrange my variants in a grid', 'organize this component set', 'lay out the variants with labels', 'make a variant matrix', 'clean up my component set layout', 'add row/column headers to my variants'. Picks the last property (usually State) as columns and the rest as rows by default. NOT something the native MCP's read-only tools do — this writes a new organized layout to the canvas.

2026-06-0162

figma-audit-accessibility

southleft/figma-console-mcp-skills

Deep accessibility scorecard for a single Figma component or component set — state coverage (default/hover/focus/disabled/error/active/loading), focus-indicator quality and contrast, non-color state differentiation, target size, annotation completeness, and color-blind simulation (protanopia/deuteranopia/tritanopia), all rolled into per-category 0–100 scores and prioritized recommendations. Use when the user wants to vet ONE component before shipping it: triggers 'audit this component', 'accessibility score for this button', 'is this component set accessible', 'check the states on this component', 'does my button have a focus state', 'color blind check', 'rate this component for a11y', 'component accessibility scorecard'. Works on ANY Figma plan. For a broad sweep over a whole page/frame use figma-lint-design; for CODE-side (HTML) checks use figma-scan-code-accessibility.

2026-06-0162

figma-blame-node

southleft/figma-console-mcp-skills

Find which Figma version introduced a specific change — a component property or a child node — via a binary search over version history (~log2(N) API calls instead of N). Answers 'who added this and when'. Use when the user wants git-blame-style attribution for a Figma design — triggers: 'when was this component property added', 'which version introduced this variant', 'who added this node', 'blame this Figma element', 'find when this was created', 'git blame for Figma', 'when did this property first appear'. Uses the Figma REST API + a personal access token because version history is NOT reachable via the Plugin API / use_figma / the native Figma MCP. For a full diff between two versions use figma-version-history; for prose release notes use figma-generate-changelog.

2026-06-0162

name	figma-library-variables
description	Discover and import design tokens from SUBSCRIBED Figma team libraries into the current file. Use when the user wants to reuse tokens that live in a shared library: triggers 'list library variables', 'what tokens are in our shared library', 'import a variable from our design system library', 'pull in the brand color token from the library'. Works on ANY plan via the Plugin API teamLibrary methods. For LOCAL variables use figma-export-tokens / figma-manage-variables.
disable-model-invocation	false

figma-library-variables — discover & import team-library variables

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).
Local (non-library) variables → figma-export-tokens, figma-manage-variables.

Workflow

Discover. Run scripts/list-library-variables.js via use_figma (skillNames: "figma-library-variables"). Optionally set the LIBRARY_NAME / COLLECTION_NAME / TYPE filters. It returns each subscribed collection and the key of every variable in it.
Import. Put the variable key(s) into scripts/import-library-variable.js and run it. It returns the new localId for each. Re-importing is idempotent (same local id).
Use. Bind the imported variable to node properties or reference it from local semantic tokens (see figma-use / figma-manage-variables for binding).

Notes

Only subscribed libraries appear. If a collection is missing, enable the library in the file's library settings first (a manual Figma step).
getVariablesInLibraryCollectionAsync takes the collection key, not its id.
Library variables are read-only references to the source — edit values in the library file, not here.