StateBuilder: Component State Generator & Specs

About this plugin

The fastest way to build interactive components and hand-off all states to devs.

Designing the "Default" state is easy. Manually creating the Hover, Pressed, Focus, Disabled, and Error states can be tedious. BiblioStates automates the entire process in one click.

StateBuilder understands Component Types. Tell it you have a "Checkbox," and it generates Checked/Unchecked. Tell it you have a "Button," and it generates Hover/Pressed.

Key Features:

Smart State Generation

Auto-generate the exact states you need based on component logic:

Core: Default, Hover, Focus, Pressed, Placeholder.

Validation: Success, Error, and the critical Disabled state (with auto-calculated opacity).

Selection: Checked, Selected, Indeterminate (for complex data tables).

Toggles: On / Off switch positions.

Auto-Documentation

Don't just hand off visuals. BiblioStates generates a Spec Card next to your component listing:

1. Exact Hex codes for every state.
2. Opacity shifts (e.g., "Disabled: 40%").
3. Border & Focus Ring logic.
4. Token names (if available).
5. 
   

Accessibility Guard

The plugin runs a WCAG Contrast Check on every generated state. If your "Disabled" state is invisible to users, the documentation card will flag it immediately.

Supported Components

✅ Buttons & Icon Buttons

✅ Inputs (Text, Area, Combo)

✅ Checkboxes, Radio Groups, Switches

✅ Chips & Segmented Controls

BiblioKit.com

BiblioKit is a suite of Figma plugins that cuts the grind for designers, developers, and marketers, so teams ship faster with clean, consistent files.