State Previews
Hover, focus, disabled, and custom states are rendered as a matrix alongside the default.
How it works
For components with interactive states (defined via CVA or manual state classes), the plugin generates a state matrix: a grid of frames with each state applied. Designers can see default, hover, focus, disabled, and error states at a glance without needing to manually override fills in Figma.
Usage
- 1
Define interactive states using CVA variants or by passing state-specific class props.
- 2
Run 'Generate Design System Page' — states are detected and rendered automatically.
- 3
Each state (default, hover, focus, disabled, error) gets its own Figma frame.
- 4
Frames are arranged in a row so designers can compare states side by side.
- 5
State frames are labelled with the state name below each frame.