Ship complete component states.

Auto-generate hover, focus, error, and disabled states with spec cards so designers, developers, and marketers stay aligned on design systems, handoff, implementation, launch, and campaigns.

Install BiblioStates state matrix, spec cards
BiblioStates plugin panel showing component state generation and spec card preview in Figma.

Missing states slow every launch.

  • Default-only components force developers to guess hover, focus, and disabled behavior during implementation.
  • Spec cards drift after design system updates, so handoff and launch QA find mismatches.
  • Manual state grids eat hours when campaigns need fresh UI fast.

The Spec Gap

When states are undocumented, developers rebuild behavior and marketers ship launches without edge cases.

"We caught missing focus states after launch because the docs never made it into the file."

Dashboard showing multiple UI component states laid out in Figma.
Typical Result: Full state coverage in minutes

Watch BiblioStates generate UI states and specs

GIF: Select components -> Generate -> State matrix + spec card
Before/After: Missing states

Added 18 states instantly

Spec card preview

Handoff-ready documentation

Coverage summary
Trusted byDesign System TeamsProduct DesignersFrontend EngineersMarketing TeamsQA ReviewersDesign Ops

Three steps to complete specs.

1
Step 1: Select components

Select Components

Choose the components or variants you want to document. BiblioStates reads their structure.

2
Step 2: Pick state set

Pick States

Toggle the states you need, from hover and focus to error, disabled, and selected.

3
Step 3: Generate matrix + specs

Generate Specs

Create a state matrix and spec card in seconds, ready for implementation and handoff.

Generate required states fast

Fill hover, focus, pressed, error, and disabled states instantly so every component ships complete.

  • Supports variant sets and component properties
  • Keeps spacing and tokens aligned with design systems
  • Produces a matrix ready for launch QA
Screenshot: State generation panel

Spec cards for developer handoff

Generate a documentation frame with state notes so developers can implement the exact behavior.

Screenshot: Spec card layout

Surface missing states before launch

BiblioStates surfaces gaps in your state coverage so handoff stays clean and implementation stays accurate.

Screenshot: Missing state alerts

Built for design system and launch work.

Design System Release

Problem: Variants drift after token updates.
Result: Complete state matrix ready for handoff.

Before: Missing states
After: Full matrix

Campaign Launch QA

Problem: Marketing assets miss edge states.
Result: Launch-ready UI across channels.

Before: Unverified states
After: QA ready

Generate states once, ship everywhere.

Install BiblioStates to create state matrices and spec cards so designers, developers, and marketers stay aligned through handoff, implementation, launch, and campaigns.

Install BiblioStates
BiblioStates Plugin Icon
Specs Ready

Watch BiblioStates generate UI states and specs

What states does BiblioStates generate?

Generate hover, focus, pressed, error, and disabled states, plus optional success or selected states based on your component.

Does it work with any design system?

Yes. BiblioStates works with any Figma components and is tuned for design system variants.

Can I choose which states to include?

Yes. Pick the states you need before generation, then review the matrix before handoff.

Is BiblioStates live?

Yes. Install it from Figma Community and generate your next state matrix.

Launch-ready states, every time.

Keep implementation and handoff aligned with spec cards that support campaigns and product launches.

Install BiblioStates

Want to audit your design system for errors? Check out BiblioAudit