Figma Tutorial: Variants in 11 minutes (With Demo File & Real Examples)

My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)

Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)

Outline - Figma Wireframe Kit (350+ components and variants)

Sign up to my newsletter for exclusive content:

Follow me on IG (Daily updates):

===

Level up with me:

[Mizko]

Become a FIGMA EXPERT With me today!

My Ultimate Figma Design Masterclass (2, 500+ students. 90+ Videos. 10+ hours.)

Shipfaster UI - Advanced Figma Design System (2, 000+ Designers, 6, 000 components and variants, 150+ global styles and 2, 800+ media assets)

Outline - Figma Wireframe Kit (350+ components and variants)

Yours truly,
Mizko

[XMao-nctc]

The key is the naming of the symbols! Each "/" is a property, in an order like component/type/size/state -> e.g. Button/Primary/Large/Hover

[JaviAlaves]

Great example! Also: If you're creating something from scratch, you can also use the "+" button within the variants section to set up the component variants. This helps, specially in the beginning if you can't conceive all the possible variants and states of the component straight away to have to set them all up between slash characters.

[Digital.Done.Right.]

Why do you make these videos? I mean really. This is Masterclass stuff and you need $$ for sharing this. I have seen numerous Figma vids and they don't come close to the clarity as you do. Smashed. Subbed. Just feel that's not enough.

[arpitadutta]

Hi Mizko, learning new tool isn't easy and definitely frustrating, but you are transforming my learning experience into an interesting one. I just found you yesterday and want to thank you thousands of times for creating these videos. They are great! You are superb. 🥰

[chineezy]

I stumbled on your page while looking for how to use grids in Figma and you've been so helpful. You break everything down and make it easy to understand. Thanks a million!!!

[roykeemchi]

your battery life had me on the edge. thanks for this tutorial!

[hareeba]

Smashed the LIKE button, and that camera work is sick as heck

[doranpatrick]

Anybody else gently smash the like button simply because Mizko asks so nicely?

[shaun]

I can't find demo file link in the description.

[citizenx]

Fantastic job on the video! You explained variants way better than anyone else. Thanks

[delia]

I have now switched from sketch to figma and I was very confused at the beginning, i also watched a few tutorials and had not understood so much, but your way of explaining it in yours tutorials has totally illuminated me . Thanks you a lot ✌🏻🤗

[daryllee]

Your Vids are real-world practical problem solvers dude!

[shesanosan]

Quick shortcut for creating a component figma has a small component icon at the top click on the drop down and select " create multiple components at once"

[suhaibztv]

You're highly underrated. Thanks and all the best!

[asierferrara]

Thanks for the tutorial. Where can I get the demo file?

[supriya]

I didn't even know this was possible. Great video as always !

[dinosace]

Hope you have a good day Mizko cause you completely save my day!

[kingbukie]

Thank you so much, I have struggled using variants for a long time and most videos assume these basic things that you have showed in the video

[noel-laurenhernandez]

You are a great teacher. The way you explain and check for understanding is great. Teacher approved! Thank you very helpful!