Figma Support Forum

Button Variants best practice

I’m working on a project with many different types of buttons.

I’ve decided to build the many variants by basing them on a Main/Master component.
The Main/Master component has variants itself and holds all the information regarding shape, size and icon placement.
The Child Variants hold the different states, colors overrides for primary and secondary, wether there’s an icon or not, etc.

In the design, those buttons sometimes need to hug their content sometimes be full-bleed and fill their parent container. For the same button, sometimes the label should be centered and sometimes aligned left/right.
Is it best to create variants for hug content and fill container plus the L/C/R alignements? or is it best to set all buttons in the variants to hug content and apply auto-layout overrides in the design?

I’m afraid that creating all options will become very cumbersome to maintain over time and would like to know what’s the best practice for such use-cases.

Hi, I would think about how do you want it to be coded. Instance overrides are equivalent of HTML inline CSS in web dev. There are rare occasions in which a developer wants to use inline HTML (see under When to Use Inline Styles). Consider that, if it’s cumbersome to maintain over time for you, it will be also for your developer.
But, if L/C/R modifications are smaller rare occasional overrides, then these may take place inline or in your case as auto-layout overrides. As best practice, you should avoid these, and instead you may try to rethink you design decisions and simplify cases, reducing them to fewer states.

1 Like

Thank you for your input this makes a lot more sense now.

I’m porting a design to Figma and building its design system along the way. So trying to make do with what was there and making it more streamlined.