agentsclimarketplace
Sign in

Design system inventory figma

Skill southleft/skills-for-figma/skills/design-system-inventory-figma

One call to inventory an entire Figma design system — variables/tokens (grouped by collection + mode), components and component sets (with property definitions and per-variant visual specs), and styles (color/text/effect with resolved values). Use when you need the whole design-system picture before generating code or auditing coverage — triggers: 'inventory my design system', 'extract all tokens and components', 'what's in this design system', 'dump the design system kit', 'give me every variable, component, and style', 'build a design-system manifest', 'audit my Figma library'. Has a verbosity/scope guard so big files don't blow the response budget. Goes well beyond the native MCP's get_design_context (single-selection) / get_metadata.From its SKILL.md

Install
npx -y skills add southleft/skills-for-figma --skill design-system-inventory-figma

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 12 stars12 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.2 KB, 861 tokens by cl100k_base, as published. Nobody here has run it

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 visualSpec → references/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

  1. Pick scope & verbosity to control response size on big files. Edit the constants in scripts/inventory.js:
    • INCLUDE — any of "tokens", "components", "styles" (default: all three).
    • VERBOSITY — "full" (per-variant visual specs), "summary" (component metadata + props, no per-variant specs), or "inventory" (names/ids/counts only — for huge files).
    • COMPONENT_NAME_FILTER — substring to limit components (e.g. "Button").
  2. Run via use_figma (skillNames: "design-system-inventory-figma"). Reads variables through the Plugin API, so it works on every Figma plan (no Enterprise REST requirement).
  3. Consume. Use tokens for color/spacing/typography values, components[].properties for the component API, components[].variants[].visualSpec for per-state appearance, and styles for any style-based (non-variable) values.
  4. If the result is still large, drop to a lower VERBOSITY or narrow INCLUDE / COMPONENT_NAME_FILTER and re-run — don't try to page a giant full dump.

Notes

  • Colors are emitted as hex (Figma stores 0–1 RGBA internally); spacing/size values are px.
  • Variables resolve aliases to token names ({Color.Brand.Primary}-style) where possible.
  • Per-variant visual specs come from each variant component node — see references/visual-spec.md for the fields (fills, strokes, effects, cornerRadius, opacity, layout/padding/spacing, typography).
  • This script is the open-coded, root+first-level equivalent of the bundled figma_get_design_system_kit tool, written in the native use_figma idiom so it runs without the Desktop Bridge. It captures each component/variant's root visual spec plus its direct children (childSpecs); it does not recurse deeper.

What ships with it: 2 files

16.8 KB alongside SKILL.md, 1 of them executable

references/

scripts/

Gives 0 of the 12 instructions most design systems skills give in 861 tokens

Counted across 501 of the 520 authors here whose files we hold, read 2026-09-06

  • Extract colors, typography, spacing, radii, shadows, breakpointsin 20 of 501, across 10 files
  • Create a self-contained dependency-free HTML preview pagein 20 of 501, across 10 files
  • Keep touch targets at least 44x44pxin 20 of 501
  • Score the UI across ten dimensionsin 18 of 501, across 8 files
  • Animate exclusively via transform and opacityin 18 of 501, across 15 files
  • Ensure WCAG AA color contrastin 18 of 501, across 13 files
  • Generate DESIGN.md with rationale for each decisionin 17 of 501, across 7 files
  • Ensure proper contrast and readabilityin 15 of 501, across 10 files
  • Scan the codebase for existing style patternsin 15 of 501, across 6 files
  • Give every interactive element a visible focus indicatorin 15 of 501, across 13 files
  • Propose a design token setin 14 of 501, across 5 files
  • Create a custom theme when none fitin 14 of 501, across 9 files

Said here and by no other author read

  • Load the figma-use skill before writing scripts
  • set INCLUDE, VERBOSITY, and filter constants before running
  • run the inventory through use_figma
  • write plain JavaScript with top-level await and return
  • inline inputs as consts at the top of each script
  • load fonts before any text operation

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.