Button Genie Pro

About this plugin

Welcome to Button Genie Pro, the Figma plugin that instantly generates a fully featured button component set with every variant, state and Token, so you can focus on design, not tedious setup.

https://geniepro.app/

Quick Start

1. Create a new page in your Figma file where you want to place your button component set.

2. Run the plugin: Search for Button Genie Pro.

3. Follow the two-step UI to create variables and generate buttons.

Create Variables Foundations

On the first screen of the plugin, a single click generates 5 variable collections to lay the foundation of your button system. This makes updating your buttons much more flexible:

00 Primitives

01 Style Tokens

02 Semantic Colors

03 Sizing Tokens

04 Component Tokens

05 Typography

Preview and Generate Button Set

1. Light and Dark Mode: See your Primary, Secondary, and Tertiary buttons side by side in Light and Dark Mode. When you choose your Light or Dark Base Color, Button Genie Pro will automatically define the reverted color. (You can always tweaks colors later in your Figma Variables section).

2. Real-time Contrast Check always make sure your text meets WCAG AA or AAA standards.

3. Customize:

- Button text

- Stroke width for secondary button

- Horizontal/vertical padding, gap, and border radius

- Toggle variants: hover, focus, selected, disabled

- Add icon-only or pill-shaped buttons

4. Create Button Set: Click to generate up to 360 variants (3 types × 5 states × 2 shapes × 3 sizes × 4 content variants), a set of semantic buttons (Success, Warning, Error), and a set of placeholder icons. The base color you choose will be added to your custom color scale (myColor/randomName/50–900) in the Primitives variable collection.

Use Your Button Component

- All generated buttons are grouped into component sets in your document.

- Drag instances onto any frame and override text or icon as needed.

- Variables keep your design tokens flexible: update a token to cascade changes through every button.

Troubleshooting

- If you don't see new components:

1. Ensure you've correctly generated variables/tokens at the first screen, before generating your button set.
2. This plugin needs a Figma paid subscription to create Variable Modes. Make sure your have one. If not, the plugin will not work as expected.

- For manual hex input issues, make sure to include a leading `#` and six hex digits.