Help us improve
Share bugs, ideas, or general feedback.
From skills-for-figma
Analyze a Figma COMPONENT_SET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating an interactive component from a Figma variant set — triggers: 'analyze this component set', 'turn these variants into CSS states', 'generate a button/input/checkbox from Figma variants', 'what changes between the hover and default state', 'map Figma variants to component props', 'extract the state machine for this component'. Resolves bound variables to token names. NOT covered by the native MCP's get_design_context/get_metadata, which don't give you a variant-axis→CSS-state machine.
npx claudepluginhub southleft/skills-for-figma --plugin skills-for-figmaHow this skill is triggered — by the user, by Claude, or both
Slash command
/skills-for-figma:analyze-component-set-figmaThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Take a Figma `COMPONENT_SET` (the purple dashed container holding all the variants of one
Measures whether skills, rules, and agent definitions are actually followed by auto-generating test scenarios at 3 strictness levels and reporting compliance rates with full tool call timelines.
Share bugs, ideas, or general feedback.
Take a Figma COMPONENT_SET (the purple dashed container holding all the variants of one
component) and turn it into a code-generation blueprint: which property axes are state vs size,
how each state maps to a CSS pseudo-class or ARIA attribute, and the minimal visual delta each state
applies on top of the default variant. This is the bridge between "Figma has 12 button variants" and
"emit one .btn rule + :hover/:disabled overrides."
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).deep-component-figma.arrange-component-set-figma.component-properties-figma.get_design_context /
get_metadata do not provide — they return raw structure, not a variant→CSS state machine.figma_get_selection), a search, or a
node id they paste. It must be the set, not an individual variant — the script validates type.scripts/analyze-component-set.js via use_figma
(skillNames: "analyze-component-set-figma"). Set const COMPONENT_SET_ID at the top first.variantAxes (each axis + its options), componentProps
(non-variant TEXT/BOOLEAN/INSTANCE_SWAP props → code props), a stateMachine with cssMapping
(state name → CSS selector) and defaultSignature, and per-variant diffFromDefault.defaultSignature, then add one rule per
cssMapping entry applying only that variant's diffFromDefault. Map componentProps to
framework props: BOOLEAN→boolean, TEXT→string, INSTANCE_SWAP→ReactNode/slot, VARIANT→union.stateMachine.states got a CSS rule, and that
token names in the diff (e.g. Color/Brand/Primary) resolve to your exported tokens.The script normalizes the state axis value (case-insensitive) to a selector:
| Variant value | CSS / ARIA selector |
|---|---|
default | (base rule, no selector) |
hover | :hover |
focus / focused / focus-visible | :focus-visible |
active / pressed | :active |
disabled | :disabled, [aria-disabled="true"] |
error / invalid | [aria-invalid="true"] |
selected | [aria-selected="true"] |
checked | :checked |
loading | [aria-busy="true"] |
open / closed | `[aria-expanded="true" |
filled | .has-value |
diffFromDefault lists only the
properties that change (fill token, stroke, text color, opacity, effects, child visibility). Emit
exactly those as overrides — don't re-specify unchanged properties.boundVariables (fills/strokes) to token names when available, falling
back to raw hex. Prefer the token name in generated code.state/status/interaction is the state axis;
size/scale is the size axis. If your set names axes differently, the cssMapping may be empty —
read variantAxes and map states yourself.