Let’s be honest: designing the "Default" state is the fun part. The boring part? Duplicating that button 5 times to make the Hover, Focus, Pressed, Disabled versions, and etc. Plus typing out a "Spec Card" for the developers so they know the Disabled opacity is 40%. I built BiblioStates because I kept forgetting to add states which I am sure devs do not appreciate. How it works: Select any component (Button, Input, Checkbox). Click "Generate." Get component states and specs. Done.

Hey Product Hunt! 👋 I'm the creator of BiblioStates (part of the BiblioKit Studio). We all know the drill: You design a beautiful button. Then you have to duplicate it 5 times to make the Hover, Focus, and Disabled states. Then you have to check the contrast. Then you have to write a note to the developer explaining that the Disabled opacity is 40%. It’s boring, repetitive grunt work. BiblioStates automates it. Select your main component. Choose your states (Hover, Focus, Error, etc.). Click Generate. The plugin creates the variants AND writes a "Spec Card" next to them with all the technical details your developer needs. The Offer: The plugin is Free to try. Let me know what you think! Does this save you time? 👇

BiblioStates

Auto-generate component states & specs in Figma.

Auto-generate component states & specs in Figma.