figma-analyze-component-set — variant state machine → CSS

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."

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).
• Full recursive tree (unlimited depth, reactions, instance refs) → use figma-deep-component.
• Reorganizing variants into a labeled grid → use figma-arrange-component-set.
• Adding/removing the properties themselves → use figma-component-properties.
• This is a design-system code-gen capability that the native MCP's get_design_context / get_metadata do not provide — they return raw structure, not a variant→CSS state machine.

Workflow