southleft/skills-for-figma

library-variables-figma

Discover and import design tokens from SUBSCRIBED Figma team libraries into the current file.

View source

How to use

  1. Copy the installation command and review the source package before installing it in your own agent environment.
  2. Check the source document for required tools, credentials and supported hosts.
  3. Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/southleft/skills-for-figma --skill library-variables-figma

Before you start

  • Installation does not include a model subscription, API allowance or permission to access your files.
  • Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document

Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.

library-variables-figma — 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 → export-tokens-figma, manage-variables-figma.

Workflow

  1. Discover. Run `scripts/list-library-variables.js` via

use_figma (skillNames: "library-variables-figma"). Optionally set the LIBRARY_NAME / COLLECTION_NAME / TYPE filters. It returns each subscribed collection and the key of every variable in it.

  1. 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).

  1. Use. Bind the imported variable to node properties or reference it from local semantic tokens

(see figma-use / manage-variables-figma 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.

Related by task

from this repository

More skills

All skills
southleft
Community

analyze-component-set-figma

Analyze a Figma COMPONENTSET 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 varia

installs
1
GitHub stars
14
Updated
Jun 1
southleft
Community

annotations-figma

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', '

installs
1
GitHub stars
14
Updated
Jun 1
southleft
Community

audit-accessibility-figma

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', 'accessi

installs
1
GitHub stars
14
Updated
Jun 1
southleft
Community

check-design-parity-figma

Compare a Figma node's actual specs against a code spec (the values your component renders) and get a 0–100 parity score, a list of discrepancies, and fix suggestions. Use to detect design-to-code DRIFT: triggers 'check design parity', 'does my code match the Figma', 'compare this component to the design', 'is my implementation faithful', 'find differences between design and code', 'verify the build matches Figma', 'design QA against code', 'parity score'. Reads the node's visual / typography /

installs
1
GitHub stars
14
Updated
Jun 1