Skip to main content
Question

The best way to design a large set of buttons

  • August 25, 2021
  • 2 replies
  • 5687 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.

    2 replies

    S.Frank
    • S.Frank
    • 1 reply
    • 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 settings

    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