Button States Generator

Enhance your design workflow with the Button States Generator and create consistent, accessible button components effortlessly.

OverviewThe Button States Generator is a Figma plugin designed to streamline the creation of button components with multiple states: Default, Hover, Active, Focus, Selected, and Disabled.

Features- Dynamic Button Creation: Generate button components with customizable dimensions, radius, paddings & colors- State Variants: Automatically create and manage button states including Default, Hover, Active, Focus, Selected, and Disabled.- Color Customization: Easily adjust each state colors, with options to randomize or reset to default.- Contrast Checker: Built-in contrast checker ensures your design meets WCAG standards for accessibility.- Icon Placement Options: Choose from multiple icon placement options (none, left, right, or icon-only) as a component property.

How to UseAssuming you already have your button design ready:

1. Select button Frame: Start by selecting the frame of your button.

2. Customize Settings (optional): Use the plugin's UI to adjust dimensions, colors, and other settings if necessary.

3. Choose Icon Placement (optional): Select the icon placement option from the dropdown menu (none, left, right, or icon-only).

4. Generate Components: Click 'Create Component' to generate the button variants.

Note: This will not work if you select a pre-existing component. If your button is a component, detach it to convert it into a Frame.

Component PropertiesThe generated button component includes these useful properties:- States: Choose between Default, Hover, Focus, Selected, and Disabled states- Icon: Control icon placement (None, Left, Right, Only)- Colors: Adjust text and background colors for each state- Dimensions: Fine-tune sizing, radius and paddingSupportFor any questions or support, please contact luc.hespel@gmail.com