Help us improve
Share bugs, ideas, or general feedback.
Inventories an entire Figma design system: tokens (grouped), components (per-variant specs), and styles (resolved). For code generation or auditing. Triggered by 'inventory my design system'.
npx claudepluginhub southleft/figma-console-mcp-skills --plugin figma-console-mcp-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/figma-console-mcp-skills:figma-design-system-inventoryThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A single `use_figma` call that walks the whole file and returns a structured kit:
Orchestrates multi-phase Figma design system builds from code, creating variables, tokens, and component libraries with variant bindings and theming.
Extracts design tokens including colors, typography, and spacing from Figma files via REST API. Converts to CSS custom properties, JSON, or Tailwind config for design-to-code pipelines.
Automates design handoff from Figma to code: extracts tokens, maps components, detects drift, and generates implementation plans. Reduces handoff time from hours to minutes.
Share bugs, ideas, or general feedback.
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.
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).visualSpec → references/visual-spec.md.figma-deep-component. One variant set as a CSS state machine →
use figma-analyze-component-set. Token files on disk → use figma-export-tokens.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.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").use_figma (skillNames: "figma-design-system-inventory"). Reads variables through
the Plugin API, so it works on every Figma plan (no Enterprise REST requirement).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.VERBOSITY or narrow INCLUDE /
COMPONENT_NAME_FILTER and re-run — don't try to page a giant full dump.{Color.Brand.Primary}-style) where possible.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.