mcpField
F
figma-library-variables

figma-library-variables

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

About figma-library-variables

figma-library-variables is a skill for discovering and importing variables from team libraries subscribed to by the current Figma file. Imported variables retain their source references and receive local IDs for binding or reuse.

Key features

  1. 01List variables from subscribed libraries
  2. 02Filter by library, collection, and type
  3. 03Import variables and return local IDs
  4. 04Make repeated imports idempotent

Use cases

  1. 01Find design variables in team libraries
  2. 02Import library variables into the current file
  3. 03Bind imported variables to node properties

Install

Copy the command and run it in a terminal.

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

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

Bundled filesscripts/import-library-variable.jsscripts/list-library-variables.js

Details

From the project README

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

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

Comments

Markdown supported