Creating and Using VARIANTS in Figma

[@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!

[@mdsnotavailable]

Thanks Tim!

[@coulddooooo]

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

[@raygandesign]

I know right

[@yoyoz333]

yeh its like Figma literally have no UX designers in their own company.

[@leomega]

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

[@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.

[@ahmadjabbar9121]

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

[@garyvoigt321]

Yes - More Figma tutorials from MDS

[@jimmybotao1]

Mind blowing... Best variants tutorial so far 🤯

[@mdsnotavailable]

Thanks Shaobo!

[@faithk.9352]

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

[@mdsnotavailable]

Awesome. Glad you liked it!

[@kev16]

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

[@mdsnotavailable]

Thanks! Yep this was my first tutorial recording on my XDR monitor. Definitely too big. Will fix in future videos. 👍

[@jeffchow6722]

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!

[@Mzmsz]

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

[@mdsnotavailable]

😅🙌

[@Kris-to7vh]

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

[@mdsnotavailable]

Thanks Ben! You're totally right. This was one of the first videos I made recording on my big monitor and I overlooked how tiny the UI would be until afterwards. Next ones will be better!

[@ashishdhakal3118]

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

[@ashishdhakal3118]

Can you also make a video explaning those autolayout with constraints with some HUG Content and other new stuff please. Thats Confusing too

[@DevonFrohne]

Great stuff. Thank you!

[@christinesoules71]

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

[@mdsnotavailable]

Thanks so much Christine! More are definitely on the way...

[@staRgraZer81]

Good video; struggling a bit on how to utilize variants to create a prototype without using a gazillion different frames/instances of them. Would be nice if you could prototype an instance of an icon so that if you hover or click it it changes to a different variant within that frame without having to make a different frame to show the action... thoughts on how to do this easily?

[@staRgraZer81]

Just answered my own question after searching for a bit... it's in "beta" mode now and you have to request access to these features from Figma: "interactive components beta" . Very powerful if it works as I think it will!

[@mdsnotavailable]

If you have access to the "interactive components beta" from figma, it makes this MUCH easier. I'm getting ready to post a video about this too. You can read more about that beta here: help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants#h_01F13PW6A4YF8G3MGD2GG3Y4AR

[@paoloduarte1794]

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.

[@mdsnotavailable]

Soon!

[@paoloduarte1794]

@@mdsnotavailable looks like Figma already did this with their interactive components launch. Would still be cool to see a how to!

[@ahmadyahya7376]

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

[@mdsnotavailable]

Thanks! You would need to create an interactive variant group, with a "clear" button linked to the group of blank check marks.

[@joemontero741]

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.

[@mdsnotavailable]

Thanks Joe! Figma has overrides similar to Sketch, but this definitely takes it to the next level. Would love to see Sketch implement something like this. 👍

[@ginnerzapata5909]

amazing video

[@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

[@mdsnotavailable]

soon!

[@meylon257]

love this thanks

[@chicoselfie1602]

your the best!

[@ricardomourao4342]

Very good!!

[@varunparashar31]

Hi MDS, Is there a way to add keywords to the Figma variants so that it is easy to search from the assets panel?

[@mdsnotavailable]

As far as I know, variant named don't show up in the asset panel, so you'll need to make sure your main component naming is on point.

[@BenNouba]

thank you, why signing in of intro to icons course doesn't work?

[@mdsnotavailable]

Just fixed it

[@BenNouba]

@@mdsnotavailable Thank you so much🙏

[@npaul1440]

please let me know what the font is . Looks soooooooooooooo cool.

[@mdsnotavailable]

TT Firs Neue 👍

[@AxelParis]

Awesome tutorial, thanks :) you rock!

[@mdsnotavailable]

Thanks Axel 🙏

[@exchangevisual6252]

Solid!

[@yoyoz333]

Are you using a beta version of Figma? these variants dont work based on your explanations and I certainly dont get that little interactive button at 2:52

[@mdsnotavailable]

No, this is the public release. If you aren’t getting the toggle switch, the most likely problem is that your variants are not named correctly. (Eg. yes/no or on/off)

[@yoyoz333]

@@mdsnotavailable so the method only works if you strictly name it as "on/off"?

[@yoyoz333]

Wouldn't that be a bit limiting if figma only allows a certain feature to function if you have to be extremely accurate with naming a variant?

[@mdsnotavailable]

@@yoyoz333 on/off true/false yes/no all work.

[@yoyoz333]

@@mdsnotavailable i can confirm this works now. thanks. I do still believe this is a limiting bug if a name stops the button from working. this should be something that Figma should fix.

[@arammonfared1571]

thank you it was really helpful

[@cynthiajames5335]

How did you get the figma main page to be black in color?

[@mdsnotavailable]

Click the canvas (off of a frame) and change the color in the properties panel on the right.

[@mohammedomran5491]

How to figma dark mode ?

[@artdawggy]

My thoughts after finishing this video: Wow!

[@xrplayground]

This is amazing, thank you so much! Do you know any way to swap Figma libraries?

[@citpw]

How to enable microinteractions within variants? Meaning when you are prototyping so you can see the hover and pressed action? hope that make sense

[@mdsnotavailable]

Just made a video about this kzbin.info/www/bejne/qZ3QfayXpNF5a5I

[@marcelcaputo]

Muito bom !!!

[@bencelinski523]

Great tutorial, thanks so much Matt! I think that for stuff like the dots (or any element which has its static place) it can be turned on/off in the layers panel as well (using an eye icon). This way we can possibly have less variants/naming combinations to consider. But I guess it's a personal preference thing ;)

[@mdsnotavailable]

Thanks Ben! Agreed on the layers panel thing. For me the usage of a variant implies a “finished component” vs toggling layers I view as something “in-progress” so it definitely helps to put some rules around all of this stuff when working in teams, whether it’s an eyeball toggle or a variant toggle. As long as no one is confused, both options work. 👍👍

[@erfannourian644]

Thanks

[@laxmankshirsagar1530]

Thank you so much....

[@efitreze]

So Variants are just for organization? Can't you prototype with them?

[@mdsnotavailable]

You can prototype with them, but that feature is currently in beta and not available to everyone. help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants

[@Mayank-rs7kg]

That's so generous explanation. Why don't you make more videos on UIUX and Figma?

[@mdsnotavailable]

Soon!

[@alm3382]

cool!

[@randybarias]

YES 🏆

[@JacksonHayes]

Yesssss!

[@nacholorenzo1963]

I wish I'd seen this a year earlier

[@deniswalks]

awesome! thank you for tutorial. one thing, the UI is too small to view, i think you have a massive 5k display, be kind for us, 1080p will do great or some zooming in :)

[@deniswalks]

also, what display you are using? :)

[@mdsnotavailable]

Good feedback! I noticed that too. First time recording my screen on this monitor. It’s the Apple XDR. 😬😎

[@burepe]

I was going to say the same thing. It’s hard to see on a 13 inch MacBook Pro. On mobile it would be impossible. I’d recommend filming it on a 13 inch MacBook Pro that way you can go up and down and people will be able to see it.

[@burepe]

I think there’s some recording tools that have like a magnifying glass feature. You would only really need it when you are changing the Figma settings. Editing the components in the main view is big enough.

[@euhellencassia]

thaaaaaaaaaaaaaaaaaaaaaaaaanks

[@mdsnotavailable]

weeeeeeeeeeeelcome

[@GauthamKN-1]

RIP Headphone users at the beginning.

[@mdsnotavailable]

🎧💀

[@tolokaearnmoney4645]

So useful and easy to understand. adoreable

[@BaltorAirsoftSniper]

way too complicated...