How to make the perfect Figma button.

A quick guide!

#uidesign #buildinpublic

1. Create a horizontal auto layout stack with two icons and a text label inside.

Set paddings, size, and style to define your project's smallest and primary button.

2. Duplicate the button to create multiple states, e.g., hover, active, disabled, etc. Create a component set from the resulting containers.

Define layers and the State property as shown below:

3. Duplicate buttons to create components in different sizes and accommodate different screens.

Add the Size property. Define props labels for variants, e.g., small, default, large, etc.

4. Duplicate the set to create Type variants. Defined the types of buttons in your project and set styles for occasions you need.

5. Set properties for layers. Create separate layer visibility and instances swap properties for left and right icons.

For text, create layer visibility and contents edit property.

6. Adjust property panel names to match with layers and better translate the meaning behind each variant option. Hide icons by default.

Tip: Add a special symbol "↳" to highlight properties that enclose other properties.

7. Duplicate the Button set and create a ButtonIcon set.

Remove the text label and an icon from the button containers to create the icon button.

Tip: We partition the component strategically for better search/share and maintenance purposes to avoid creating complex variants.

8. Now duplicate the Button set and create the button set for social media, aka ButtonSocial.

Create variants for state, size, and set styling to accommodate multiple login/signup options. e.g., Twitter, Facebook, etc.

9. Adjust properties and ensure layer panel names match between Button, ButtonIcon, and ButtonSocial variants.

This way, properties won't break between variants when overriding them and will remain persistent based on previously selected props e,g., color, size, or icon.

10. Enjoy your button component! Double-check and stress-test everything before sharing it with friends. Cheers! #figma

Explore the diverse and versatile range of Figma components in the FramesX UI kit 🔥

https://framesxfigma.buninux.com