Skip to main content
Question

The best way to design a large set of buttons

  • August 25, 2021
  • 2 replies
  • 5704 views
Molly_Hellmuth

I’ve created a lot of button sets over the years and using variants + base components is definitely the way to go! Here is my process:

Step 1
Create a base component for each button size (e.g. “Large”) and icon placement (e.g. “Right Icon”), name it “Base” and turn it into a main component.

Screen Shot 2021-08-23 at 3.05 1

Step 2
Add multiple instances of each base component and apply overrides to create unique types (e.g. “Secondary”) and states (e.g. “Hover”).

Screen Shot 2021-08-23 at 3.09 1

Step 3
Turn every unique instance into a main component, select “combine as variants”, and rename variant properties & values.

Screen Shot 2021-08-23 at 3.10 1

Step 4
Make bulk changes by editing the base components.
Base - C

–

If you want some practice or a starting off point for your next project check out my (free) Button UI kit

Button UI Kit: https://uiprep.gumroad.com/l/fAAgt?_ga=2.136435382.709511783.1629657346-34411364.1624652900

    This topic has been closed for replies.

    S.Frank
    • S.Frank
    • December 29, 2021

    Thanks for sharing, I learned a lot!

    H

    Do you have a new strategy now once Figma added more functionality?

    Terms & ConditionsCookie settingsAccessibility statement

    Cookie policy

    We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

     
    Cookie settings