Button States Generator

About this plugin

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

Overview

The 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 Use

Assuming 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 Properties

The 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 padding

Support

For any questions or support, please contact [email protected]