Figma Tutorial: Variants

[@Figma]

"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about variants in Figma: help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants"

[@LuckyLifeguard]

toggle switch is just that extra touch of detail that made this even cooler wow

[@TheChillBison]

Yeah, the fact that it wasn't just another dropdown really speaks to how much they've thought through this.

[@alixopa]

This feature gave me goosebumps!

[@eldwinc9884]

we need to give this feature a category name - creating automated design systems?

[@alexmartens6269]

Figma team, thank you for changing the world of design! 😭❤️

[@obvinpro]

XD was first to introduce this feature "Component States" and it works much better on XD than Figma

[@thespadgett]

Photoshop has had this with the Smart Objects for a couple years now.

[@irhmkrm]

FINALLY!! Historical moment.. we have come a looong way for this, through pain & tears *photoshop & illustrator 😭✨💥🎉

[@obvinpro]

Adobe XD can do this. And they implemented it before Figma

[@virtual_farmer_881]

Haha! Can't imagine doing this in Photoshop

[@obvinpro]

@@virtual_farmer_881 Photoshop is a photo editing app not a UI design tool

[@crarls27]

@@obvinpro Mm... not so much. You can have components in XD but each variant is still its own individual component. Gets messy quickly.

[@virtual_farmer_881]

@@obvinpro I have seen designers in fortune 500 use it for their UI design as recent as 5 years ago. When traditional graphic designers moved to UI design, they got their tools with them.

[@cjasusual]

I was organising components then this dropped, Thanks a lot!

[@Figma]

We released it just for you CJ! Let us know how Variants help your process!

[@DenisFadeev]

@@Figma it definitely will!

[@D_relle]

Ditto lol

[@KayoDante]

One day before this function arrives I was suffering inside because of the work I had to organize everything. Opening Figma the next day and seeing this update make my head explode. You guys are awesome!

[@webtalk3373]

Figma was already a complete package! But now... NO WORDS! Very thankful to the Figma team! You guys are great!!

[@Figma]

Thanks for the positive words, Usman! Excited to hear about how you use Variants in your work!

[@Figma]

Simplify your design system and bring your components closer to code using Variants, and let us know how Variants helped your team in the comments. Subscribe to our channel to be notified when we release Interactive Components, so you can use your Variants in your Prototypes!

[@Artcore1111]

Are there any plans to tie this feature to prototype interactions? ie: "On Click Set Property" instead of overlay

[@Figma]

Hey ​@@Artcore1111, what you're describing is the Interactive Components feature mentioned in the comment above. We'll be building upon the foundation of Variants, and bring them into your prototypes in the future via Interactive Components. We have a sneak peak of Interactive Components from our Config Europe conference last month which you can watch here: kzbin.info/www/bejne/gJbUqqmmYs2Zo80 Hope this clears things up!

[@NickQuinn1986]

hey, great video, do you guys have a video solely dedicated to file naming?

[@jeannekepaan]

I can't believe I've been plodding along without using this functionality for so long! Can't wait to begin building variants into my component libraries!

[@leomega]

we turned 170 buttons into 1, love you guys!

[@trill_lexapro]

still have to make the 170 buttons in the first place 😭

[@blockAbir]

@@trill_lexapro yeah but we don't have to look for them all the time :D

[@garaujos]

Thank you. Now the team will use the Design System in a much more practical way. You released this feature just before we released our updates to the team library. Since it works by converting the common hierarchical organization scheme, the Variants implementation becomes very simple.

[@Figma]

Thanks for the comment Guilherme! That's exactly what the team had in mind when creating the "Combine as Variants" button. Good luck rolling out the new and improved team library to your team!

[@beatrizsampedro3652]

i'm still blown away with how incredible Figma is. You, my dear software, are the future.

[@Figma]

With the introduction of Component Properties, we changed how you create variants in Figma slightly. We made a quick tutorial on how to create a new variant in 3 different ways. Check it out here: kzbin.infodYP8MNN4GzE

[@EchoEnglishPodcast]

Animations With Figma kzbin.info/www/bejne/l36phqh9j55_e9U

[@lunar1427]

Can you please make an updated video? The UI has completely changed.

[@TheChillBison]

This is mind-blowing in its ease-of-use. I've only done variations a couple times before there were variants, and creating, organizing, and naming was a pain, plus there was a lot of menus. Variants are exactly what you'd want, and make it so easy to find the base component and to get the configuration you want for the design. Love it!

[@SnafuGuitarBoy]

You guys are geniuses. The more time I spend discovering about your product, the more I am amazed.

[@kaviar.boy1194]

3 dislikes are from Sketch, Adobe XD and InVision

[@mads6861]

I think they have an idea to improve this more.

[@johnnylane9577]

InVision is pure shit, my company suffered quite a long time struggling with InVision

[@patriciahimawan]

But Adobe XD have great prototype!

[@zindex5]

@@patriciahimawan I experienced wired and annoying interaction from XD on Windows.. it was absolutely fine on Mac. I love the speed and button interactive function on XD

[@patrickjohnson3143]

What dislikes? - KZbin 2022

[@NunoFigueiredoDesign]

Am I dreaming? This just made my day! Congrats to Figma team!!

[@BrentWMiller]

This is awesome. Figma is dope! Converting 84 button components into 1 was so cool.

[@ClarenceWee]

Figma just made 2020 a little better, thanks!

[@tomiwaaina5499]

Great video and a suuuuper useful thing. 1 thing tho. It was hilarious at 3:24 when he said "woah" like he didn't know what would happen xD

[@oscardeee]

lmao

[@khailuong8069]

I am happily crying for this feature!

[@deth2306]

Miraculous Variants Update! So much easier, faster and clearer. Love it!

[@guilhermesalles4313]

I started to learn Figma this year after working with complex softwares such as After Effects and Photoshop. I am blown away by how smart Figma is, this is an amazing, super complete software, but it is waaaay more intuitive than any other Adobe product. Amazing tool!

[@treegerl]

Thank you to the Figma team for another excellent video!

[@Figma]

Glad you found it helpful, Nio!

[@ThwartMorten]

Figma is fricken brilliant. The 'Combine Into Component' feature is amazeballs.

[@abinashmohanty]

Figma variants: one of the best innovative solutions in order to maintain a design system. I love it. 🤘Can't wait to explore now. 🤓

[@bmstudio5766]

Complex features explained easily and even easier to use. Bravo Figma.

[@secession77]

I think that Figma should start their own church so we all could praise them more officially :D I had a dream and you guys made it real suddenly. Love it. Now I want to redesign my extremely complex webdesign from scratch just to use the full potential of this tool.

[@worldisafrick]

Is there a video that matches the current Figma UI? It doesn't seem like all the features are covered here

[@nicolaspettini3143]

Amazing feature! The more I'm discovering Figma, the more I'm loving it! I understand why so many designers switched from XD to Figma...

[@jordihoven2349]

Can't wait to update my Design System and blow the minds of the developers :)

[@justaponyyy]

the variant option doesnt exist anymore, please make a new guide on how to use it in 2024

[@urmibhange6727]

This feature is incredible! I'm already implementing it in my projects. Thanks for making my life easier Figma team ❤️

[@MyYoutb]

This is amazing team Figma. After a long time seeing a video with no dislikes, haha. Love the community ❤️

[@matheusjorge6146]

You guys are awesome!!! I think I'm still dreaming... Congrants to the Figma team for building this amazing feature.

[@mihaelazaharia8500]

This is the best free software Ive seen. Respect.

[@ShoaibMahmudOfficial]

Figma is utilizing its recent funding. Well done

[@BenMurga]

Super happy when I saw this feature released early. Thank you SO MUCH! I've been wanting this for a long time

[@Figma]

You're welcome, Ben!

[@AbhishekKumar-wt6kn]

Wow great feature, Figma has no competition

[@antipusrises]

Please update this video showing the new methods.

[@choongching]

who actually disliked this video? it's just unbelievable. Anyway, great iteration! Thanks Figma Team.

[@AlessandroCurci]

In Italy “Viva la Figa” is like the claim of a lifetime. Now “Viva la Figma” is became the claim of a designer’s lifetime. True story

[@nicksullivan329]

Figma looks so great - the component system is great

[@ilyamiskov]

Absolutely in love with this feature! This makes it miles better than any other design software.

[@xDvDz]

Great video! Clear and concise yet thorough

[@TomHermans]

One of the best explainer video's I saw. 🙌

[@karstenkreh663]

this feature is so f***ing great. already implementing it in an actual project!

[@Figma]

That's awesome to hear Karsten! Glad it was so easy to add to your workflow!

[@rondo365]

The little "whoa" at 3:20 just kind of makes it for me

[@nguyenhiep9868]

1:50 từ component thành component set (variant) và cách thêm nó vào Library để team work hiệu quả hơn 3:07 bài thực hành 10:35 Swap

[@andressalima9741]

OUCH that made me cry of happiness

[@choongching]

I think Figma should just acquire Webflow in 2021. You two are just awesome.

[@Michb3ck]

its not up to date anymore

[@annacatarina4310]

Woah Figma is SO powerful! Can't wait to start using this!

[@unicocreativelab9232]

This is amazing. Thanks Figma for this video, keep the great stuff coming!

[@Figma]

Thanks, Unico! We're always making tutorials. Be sure to check out our new Auto layout playlist where we recently published three videos, and be sure to subscribe to our channel to be notified of future videos!

[@maxime4729]

You just killed the game!

[@MattBracewell71]

Very excited to see this finally released! Hopefully all of my named-in-anticipation-of-this-feature components will play nicely! 🤞 Awesome work @Figma. Much appreciated x

[@wise_nut]

Figma is the best, pixel moving was never this easy

[@shogotsuruda4952]

This got me excited at first, but I am disappointed that I still have to manually create different frames for each possible state in a form page in order to make a prototype work. Can't you at least make the hover state work without having to manually set each component/instance to swap to a different frame??

[@akbaralinabiev]

I have been using figma more than one year but honestly I did not know about that feature, that was amazing, thanks🙌

[@deepti.sharma.]

Took me a while to grasp as a beginner but was really densely mind blowing!!

[@connorchatting6783]

Not helpful when the UI has changed.

[@andwlp]

This is so fantastic. In love with Figma

[@dsouzaedson]

Crazy!!! Variants are so powerful ❤❤

[@rengavasan6245]

Mind blowing 😍😍 now all we need is a support to swap these states on prototype without creating new frames. I'm finding it so hard to get a hower, mouse down, active inactive states without duplicating the frames.

[@Desadesain]

Finally! Super cool feature!

[@k_caravet]

love using figma! very good narration on this too 👏

[@naelmht]

Gosh, I almost cried watching this. 🥺

[@kabirsinghmehrok]

Incredible feature, glad I learnt to use it. Thanks Figma for making a crisp and helpful video!

[@nurantarlan]

Super super cool and very helpful, especially for teams. That's why I've chosen Figma ) You are the best on your way guys, keeping on ...

[@shrawanshrestha000]

OMG!, this is now revolution , amazzing feature that figma brought. Really want to thank figma for this amazing feature. also it would be better if we can swap states of variant in prototype.

[@Figma]

Hi Shrawan, we'll be building upon the foundation of Variants, and bring them into your prototypes in the future. We have a sneak peak of Interactive Components from our Config Europe conference last month which you can watch here: kzbin.info/www/bejne/gJbUqqmmYs2Zo80

[@IvanIsayev]

This is f.. AWESOME!!!

[@jodorgu8640]

Oh wow! I had Jan 21 marked on my calendar. Seems I'll be using figma a lot more

[@nooraniali]

Wow, this was insanely awesome. I’m just learning but so glad to have met Figma!

[@gospoda2]

These videos are everything. Thank you figma team!

[@carlosrocha2591]

Figma has helping me so much, thank you.

[@dawnthomas2435]

Thanks so much! Took me forever to get the toggle switch situation in play

[@RidinDinesh]

Its 00:38 am. I thinking i am dreaming. I must be.

[@justinstraver24]

Dear Figma! Variants is amazing it quickly allows me to (re)organize my whole design system. To take this topic of (re)organisation could you make like a whole video on all tips, tricks, techniques, tools, etc that figma has to organise a large design system?

[@mozaic]

okay, this is actually pretty sweet

[@YouAlreadyKnowBabi]

Why wont the variant section on the right appear for me when I turn a frame into component just a you did?

[@josealvarezn]

Awesome tutorial, thanks!

[@Figma]

Happy to help José! Let us know if there are things we can do better in the next one! 🙂

[@josealvarezn]

@@Figma The only thing I noticed was the audio quality. Could be better the next time. ;)

[@chahakjain4693]

I can't figure out how to add another property and use it within Figma with the new updates..

[@alisov66]

Oh gosh! That’s pretty awesome!! It’s so in time😍

[@dec7952]

Has the process of creating variants changed recently?

[@samanehjafari_]

Figam Tutorials are awsome!😍

[@D_relle]

Figma you've answered my prayers!!!!

[@NaniNaniX]

Wow! Great thinking behind this update. This will make a huge change for improved design system setup!! 😍

[@NaniNaniX]

One idea: could we maybe get something similar to how we handle colors? To make it easier to present Light and Dark Mode? I don't define light/dark mode on components (way too much and slow work), so I do this on the color setup. Then I currently manually switch individual colors for the screen, which is very fast, but would go even faster with a defined setup and then only have one switch/button (between theme selection) for chosen screen(s).

[@Figma]

Great idea, Mikael! I know our various product teams are thinking about "theming" and how to solve that pain point. No plans to share, but we definitely know there's a population of Figma uses for whom that would be invaluable!

[@codingconmanuel]

That's an awesome feature! Thanks a lot 🙏🏻

[@AnmolRamgiri]

The video is outdated, the variants menu does not look like how its shown in the video, in fact I cannot see a different variants section.

[@kunfad2705]

Just a question : is there a way to have a master button when doing variants ? So that I can edit only 1 parameter like icon size in a component and it updates every variant ?

[@Figma]

Yes! Just like with normal Components, you can nest a "base" instance, or nest an instance like an icon. And if your components leverage Auto Layout, they're automatically resize to accommodate new icon sizes, too. You'll want to keep those structural components outside of the Component set, though.

[@kunfad2705]

@@Figma Ok, not very handy to have a master instance outside the variant grid imo but i'll do it this way. Thanks a lot !

[@MattBracewell71]

@@kunfad2705 But that master instance isn't really anything to do with the variant. As it can be forever swapped out for another instance you're just indicating to the variants that they have an 'open slot' (with the variant defining some overall properties). With a form field example would you want all of the icons that anybody might ever use to indicate the purpose of a field predefined in that field? Maybe - but then create a frame called 'approved textfield icons' , put your icons there (maybe coloured up master of existing instances) and make contract that those are the only icons designers(and devs) should use. #featureRequest ?

[@kunfad2705]

@@MattBracewell71 English is not my main language and I'm quite new to figma so your explanation seems a bit abstract. Do you have a link to a video that could help me understand what you're saying ? Thanks

[@neanda]

Wow, this pisses on the way Sketch handles it, good job guys

[@keto.sensei]

amazing, figma is the most powerfull and easy to use

[@patrickkaman3647]

Good I see this now, saves so much time

[@kristinludlowUX]

Variants. Freaking love this. Bye bye, awkwardly fumbling with components in Sketch!!!

[@GrantCarlile]

Love this kind of rundown.

[@evgenyzakharov3759]

Very useful and accessible. Thanks.

[@josuebeda5396]

What about prototypes working as I hover, click, etc. the button?

[@Figma]

Hey Josué, we'll be building upon the foundation of Variants, and bring them into your prototypes in the future. We have a sneak peak of Interactive Components from our Config Europe conference last month which you can watch here: kzbin.info/www/bejne/gJbUqqmmYs2Zo80

[@Doodiemiddy]

This is coming in February I think. They did a video on this recently!

[@josuebeda5396]

@@Figma Cool! Thanks a lot! And I still waiting for Figma in Portuguese 😆🇧🇷

[@funchopau]

I was excited about this new feature until I began to try it. With variants I lose one of the most powerful features of the components - the possibility of making batch design changes editing only one main component. What if I want to change, for example, the font of all the buttons inside a Component set? Do I have to select all the buttons, one by one, and change the font for each of them? I know, as the Figma team mentioned before, I can keep a structural component (like a base button component) outside the Component set, but then the variants features doesn't work very well for some instances. Here's what I've done: 1. I created a base button component with an icon and a text outside the Component set so I can make design changes in the future that will affect to all the instances (like changing corner radius, the button padding or the font). 2. Then I created an instance of that base component and, from that, I created a new component named button/primary/with-icon as a default component for my new Component set 3. I created a Component set from this button/primary/with-icon component to have a set of buttons. I followed the tutorial to create buttons with and without icon (with true and false properties to have the toggle), primary and secondary, large and small, etc. So now I have a wonderful new component called "button" that I can use throughout all my designs! Nice! 4. Unfortunately when I started to use this component I realized that the icon toggle wasn't working for me. I mean, I placed a button instance in my design, I changed the icon (I overwrote the instance), and now the variants don't work for me as I expected them to do. The icon toggle doesn't hide the icon anymore. When I change the property type from "primary" to "secondary" now the button icon changes too, which I don't want to. What can I do?

[@DariaNaidonova]

That was super informative and useful! Thank you so much!