mcpField
L
library-variables-figma

library-variables-figma

github.com/southleftDesign & UI2067 installsUpdated 21w ago
Repository

About library-variables-figma

A skill for browsing and importing variables from team libraries subscribed to by the current Figma file. Imported variables receive local IDs and can be bound or referenced like local variables.

Key features

  1. 01Browse variables in subscribed libraries
  2. 02Filter by library, collection, and type
  3. 03Import variables and return local IDs
  4. 04Keep 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

MCP support

The skill runs Figma Plugin API scripts through `use_figma`; the input does not describe it as an MCP server or client.

Install

Copy the command and run it in a terminal.

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

After installing, type/library-variables-figmain Claude Code to confirm it loaded.

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

Details

From the project README

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.
  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 / 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.

Comments

Markdown supported