How to Use Variants in Figma | Organize Your Design System Components

In this how to, we learn how to use variants in Figma to organize our design system components and make swapping between component variations much easier.

How to Design Dynamic Buttons in Figma with Auto Layout:

Other Build UX How-Tos:

View the Figma file for this project:

Personal website:

Music:
Self produced, 2012

[ParasBansal]

Wow, Great video. Very clear explaination.
Love it.

[ankitanand]

Just discovered your channel. Grateful that you are sharing your knowledge with us. Please continue doing this. Cheers.

[mischugo]

Thanks again for the comprehensive explanation. But how to organize all the variants? So, buttons, toggles, arrows ... do you also put them on the component page? I tried that with the plugin component page. And unfortunately, that does not work. But variants are omponents, right? Now I have components on the component page and variants (components) on an extra page. surely not well organized.

[juancarlostoledanosantos]

Excellent and very clear video as always, thank you so much! 🙌

[mischugo]

Nice video. Thanks a lot. Is it also possible or useful to use variants for different components? Like a burger menu black and white and a close icon, black and white? In the same component / variants

[HUTE]

you have to work at Figma... or at the bare minimum, they need to pay you lol. thanks always for the supreme content

[natige]

Great video!!! I have one question though, can you prototype variants? For example on tap change from one state to the other? I cannot find the way yet

[vincentkhoo]

I have an issue when I change the variant size the button label have back to the default label

[HUNrobar]

Thanks for the video! :) In your opinion, is it better to skip the nested inheritance approach and use batch changes inside the variant set instead? For example, if I have a lot of button variants and I want to change a style, padding or the corner radius etc. globally, then without nested components I still have to change all buttons individually inside the set because there is no inheritance. Do you think it's better to keep a flat hierarchy like the second example for the benefit of reduced layer complexity? Thanks :)

[rhysfinley]

how to create icon on left and right at the same time?

[Underhills]

What's up with those frames? Why are they larger than the content? When I browse trough the buttons in the design system I'm using it says 0 in every Auto layout section, theres no padding yet they are both scalable AND they do have padding. When I write in the button text the button scales with the text width and all the button sizes have the same left and right padding, but it says everything is set to 0 in Auto layout. Must be over 60 buttons there with no Auto layout that scales! How is this even possible?

[pranjalshah]

Variants are out!?
Gotta go update Figma!