design-system-inventory-figma

Installation
SKILL.md

design-system-inventory-figma — unified tokens + components + styles extraction

A single use_figma call that walks the whole file and returns a structured kit: tokens (every local variable, grouped by collection and mode), components (standalone components + component sets, with property definitions and a compact visualSpec per variant), and styles (paint/text/effect styles with their resolved values). It is the "read everything once" front door for code generation and library audits.

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).
  • The exact shape of each visualSpecreferences/visual-spec.md.
  • One component in unlimited depth (full tree, reactions, instance refs) → use deep-component-figma. One variant set as a CSS state machine → use analyze-component-set-figma. Token files on disk → use export-tokens-figma.
  • This is a whole-system design capability the native MCP does not have: get_design_context works on a single selection and get_metadata returns flat structure, neither gives a unified tokens+components+styles kit on ANY plan.

Workflow

Installs
7
GitHub Stars
4
First Seen
Jun 1, 2026
design-system-inventory-figma — southleft/skills-for-figma