agentsclimarketplace

Design system inventory figma

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

Open-source agent skills for the native Figma MCP server — design tokens, components, accessibility, Slides, and FigJam.

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

  • 11 stars11 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.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.2 KB, 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.

Keep looking

Skills are one crate of 328,083. 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.