Creating and Using VARIANTS in Figma

00:00 Intro
00:24 File Preview
01:25 Build a Toggle Variant
02:56 Two Types of Variants
04:06 Adding a Dropdown Variant
07:30 Nesting Variants
13:09 Naming Considerations
14:48 Building a Screen
16:00 Conclusion

[BorjaMiramon]

That was a good one. Labelling seems to be one of the trickiest parts so doing it well as soon as possible is part of the challenge.

[gengibre_]

Thank your for the clarity and showing what is possible with variants.

[timfowkes]

By far the best workflow and explanation for components and variants I've been able to find. Seriously, thank you!

[whilelab]

One of the best tutorials on the subject, really concise and to the point, and practical explanation, love it, well done!

[LeviathanDesigner]

Nice clean tutorial. Naming and structure on the Variants panel can be confusing for first-timers but it becomes easier. Thanks for the content.

[jimmybotao]

Mind blowing... Best variants tutorial so far 🤯

[ahmadjabbar]

Great work. Learned a lot and at the end I make them interactive and they look beautiful in prototyping. All thanks to you.

[coulddooooo]

God this is so much better than any of Figma's documentation, thanks!

[leomega]

my man... always making the complex -> simple.

[faithk.]

This video is SO helpful! Thank you so much !!!

[jeffchow]

this is a great video! you are a a natural teacher for sure knowing when to repeat and practice things throughout the video. the Figma official videos tend to be for existing users I find! thanks!

[Kris-tovh]

This is a great video, thanks! i understood everything about variants with this video, you teach very well! especially that naming convention part by showing all scenarios
one suggestion i might give is that you could zoom more on the menu when u talk about it because its very small and hard to see the changes sometimes

[Mzmsz]

Sporting a quarantine beard, nice! Been missing these videos. Thanks Matt, quality content 🔥

[ashishdhakal]

Thanks i Just got the main usage of variants of Figma will be applying the same thing on future

[kev]

Super helpful! But I wish your resolution was bigger, hard to see what youre doing on on the right panel

[christinesoules]

Such an incredibly helpful tutorial thank you so much!! I hope you make more :)

[joemontero]

Awesome work Matt! You're really good at teaching. I only used Figma a few times since for now I currently use Sketch. VARIANTS kind of remind me of Overrides in Sketch but with more granular control.

[monilandvoid]

Heyy, loved the tutorial! Could you make a video on how to add interactions to these buttons so that they switch seamlessly across these variants? Been having a lotta trouble with that. Again, thanks for this :D

[paoloduarte]

so good! thanks for doing this. Do you happen to have a video where you show how to prototype these checkboxes? Like selecting multiple of these at once in a prototype? I would LOVE to learn that.

[ahmadyahya]

great tutorial, thank you. by the way, is there any way to make a button that clear all the selected check box?