"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"
Virtually impossible to follow this tutorial in places because it’s so out of date. Trying to piece together a workaround ourselves using the above links isn’t good enough and wastes a lot of time
@@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.
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!
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!
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!
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.
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!
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!
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: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html Hope this clears things up!
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!
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: th-cam.com/users/shortsdYP8MNN4GzE
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.
@@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
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.
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!
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?
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
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 ?
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 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 ?
@@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
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??
@@lostcause4556 Nice catch! Yes! We are planning to release an updated version of Auto Layout soon! You can see the preview for version 3 in this highlight reel from Config Europe last month: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html We also have a behind the scenes video from the Auto Layout project team which you can watch here: th-cam.com/video/8Q5uBR52G2Q/w-d-xo.html
Selecting the existing variant and duplicating in the 2x2 grid is not happening as the duplicated ones appear below each other. Can you elaborate on that please at 9:46min
Yet with the new UI there was enough change that this seemingly very useful video detailing exactly what I came here to try to learn has become basically useless :(
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).
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!
Great release! But I still don't see an option to create "Master" button component and its children (also turned into components so they are nested) create variants. It seems like I can only use top-level components for variants, is that right? It is nice to adjust auto-layout settings, border radius, icon size and so one on just one component so my "state" components would catch up
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.
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: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html
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?
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: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html
How can I create nested properties? For example I only want to be able to grey out a radio button if it is unselected. So once the 'selected' property is set to false, a new 'active' property appears that I can toggle on and off.
Hey Deborah, Frames are a single layer, if we were to use a rectangle instead it would result in two layers (a rectangle inside of a frame/component). Using only a Frame simplifies the layers panel/layer structure to keep our files cleaner, and also prevents us from needing to add constraints to the nested rectangle to keep it responsive if we were to resize the checkbox. If you're relying on using background rectangles for surfaces, I encourage you to try using Frames wherever you can! 🙂
![Figma tutorial: Create reusable color styles [4 of 8]](http://i.ytimg.com/vi/d01Ql9ZtVnk/mqdefault.jpg)
![Figma tutorial: Create reusable color styles [4 of 8]](/img/tr.png)
"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"
Virtually impossible to follow this tutorial in places because it’s so out of date. Trying to piece together a workaround ourselves using the above links isn’t good enough and wastes a lot of time
toggle switch is just that extra touch of detail that made this even cooler wow
Yeah, the fact that it wasn't just another dropdown really speaks to how much they've thought through this.
Figma team, thank you for changing the world of design! 😭❤️
XD was first to introduce this feature "Component States" and it works much better on XD than Figma
Photoshop has had this with the Smart Objects for a couple years now.
FINALLY!! Historical moment.. we have come a looong way for this, through pain & tears *photoshop & illustrator 😭✨💥🎉
Adobe XD can do this. And they implemented it before Figma
Haha! Can't imagine doing this in Photoshop
@@virtual_farmer_881 Photoshop is a photo editing app not a UI design tool
@@obvinpro Mm... not so much. You can have components in XD but each variant is still its own individual component. Gets messy quickly.
@@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.
This feature gave me goosebumps!
we need to give this feature a category name - creating automated design systems?
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!
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!
Figma was already a complete package! But now... NO WORDS! Very thankful to the Figma team! You guys are great!!
Thanks for the positive words, Usman! Excited to hear about how you use Variants in your work!
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!
I was organising components then this dropped, Thanks a lot!
We released it just for you CJ! Let us know how Variants help your process!
@@Figma it definitely will!
Ditto lol
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.
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!
i'm still blown away with how incredible Figma is. You, my dear software, are the future.
You guys are geniuses. The more time I spend discovering about your product, the more I am amazed.
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!
Are there any plans to tie this feature to prototype interactions? ie: "On Click Set Property" instead of overlay
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: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html Hope this clears things up!
hey, great video, do you guys have a video solely dedicated to file naming?
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!
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
lmao
Am I dreaming? This just made my day! Congrats to Figma team!!
Is there a video that matches the current Figma UI? It doesn't seem like all the features are covered here
Figma just made 2020 a little better, thanks!
This is awesome. Figma is dope! Converting 84 button components into 1 was so cool.
Figma variants: one of the best innovative solutions in order to maintain a design system. I love it. 🤘Can't wait to explore now. 🤓
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: th-cam.com/users/shortsdYP8MNN4GzE
Animations With Figma th-cam.com/video/aMFUuGZ9LEs/w-d-xo.html
Can you please make an updated video? The UI has completely changed.
Miraculous Variants Update! So much easier, faster and clearer. Love it!
I am happily crying for this feature!
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...
Thank you to the Figma team for another excellent video!
Glad you found it helpful, Nio!
This feature is incredible! I'm already implementing it in my projects. Thanks for making my life easier Figma team ❤️
Figma is fricken brilliant. The 'Combine Into Component' feature is amazeballs.
You guys are awesome!!! I think I'm still dreaming... Congrants to the Figma team for building this amazing feature.
This is amazing team Figma. After a long time seeing a video with no dislikes, haha. Love the community ❤️
Can't wait to update my Design System and blow the minds of the developers :)
This is the best free software Ive seen. Respect.
Complex features explained easily and even easier to use. Bravo Figma.
we turned 170 buttons into 1, love you guys!
still have to make the 170 buttons in the first place 😭
@@trill_lexapro yeah but we don't have to look for them all the time :D
Super happy when I saw this feature released early. Thank you SO MUCH! I've been wanting this for a long time
You're welcome, Ben!
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.
Finally! Super cool feature!
Figma looks so great - the component system is great
Absolutely in love with this feature! This makes it miles better than any other design software.
Wow great feature, Figma has no competition
Please update this video showing the new methods.
3 dislikes are from Sketch, Adobe XD and InVision
I think they have an idea to improve this more.
InVision is pure shit, my company suffered quite a long time struggling with InVision
But Adobe XD have great prototype!
@@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
What dislikes? - TH-cam 2022
One of the best explainer video's I saw. 🙌
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.
Great video! Clear and concise yet thorough
I have been using figma more than one year but honestly I did not know about that feature, that was amazing, thanks🙌
This is amazing. Thanks Figma for this video, keep the great stuff coming!
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!
This is f.. AWESOME!!!
Figma is utilizing its recent funding. Well done
who actually disliked this video? it's just unbelievable. Anyway, great iteration! Thanks Figma Team.
Figam Tutorials are awsome!😍
Crazy!!! Variants are so powerful ❤❤
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?
Woah Figma is SO powerful! Can't wait to start using this!
Figma you've answered my prayers!!!!
This is so fantastic. In love with Figma
You just killed the game!
Why wont the variant section on the right appear for me when I turn a frame into component just a you did?
Took me a while to grasp as a beginner but was really densely mind blowing!!
okay, this is actually pretty sweet
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
the variant option doesnt exist anymore, please make a new guide on how to use it in 2024
I think Figma should just acquire Webflow in 2021. You two are just awesome.
Figma has helping me so much, thank you.
These videos are everything. Thank you figma team!
this feature is so f***ing great. already implementing it in an actual project!
That's awesome to hear Karsten! Glad it was so easy to add to your workflow!
Incredible feature, glad I learnt to use it. Thanks Figma for making a crisp and helpful video!
Oh gosh! That’s pretty awesome!! It’s so in time😍
Thanks so much! Took me forever to get the toggle switch situation in play
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 ?
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.
@@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 !
@@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 ?
@@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
Wow, this was insanely awesome. I’m just learning but so glad to have met Figma!
its not up to date anymore
Good I see this now, saves so much time
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
Oh wow! I had Jan 21 marked on my calendar. Seems I'll be using figma a lot more
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 ...
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??
12:30
Auto Layout and Resizing a little different, with more options I think, this is something new?
Hey Marcus, not totally sure what your question is. Could you clarify? Thanks!
@@Figma Auto Layout seems to be updated in this video, will you make the sizes margin custom for top, bottom, left and right all independent?
@@lostcause4556 Nice catch! Yes! We are planning to release an updated version of Auto Layout soon! You can see the preview for version 3 in this highlight reel from Config Europe last month: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html We also have a behind the scenes video from the Auto Layout project team which you can watch here: th-cam.com/video/8Q5uBR52G2Q/w-d-xo.html
love using figma!
very good narration on this too 👏
I can't figure out how to add another property and use it within Figma with the new updates..
That's an awesome feature! Thanks a lot 🙏🏻
Selecting the existing variant and duplicating in the 2x2 grid is not happening as the duplicated ones appear below each other. Can you elaborate on that please at 9:46min
The little "whoa" at 3:20 just kind of makes it for me
Love this kind of rundown.
Figma is the best, pixel moving was never this easy
OUCH that made me cry of happiness
Yet with the new UI there was enough change that this seemingly very useful video detailing exactly what I came here to try to learn has become basically useless :(
Awesome tutorial, thanks!
Happy to help José! Let us know if there are things we can do better in the next one! 🙂
@@Figma The only thing I noticed was the audio quality. Could be better the next time. ;)
Super😍 Thanks Figma!
Wow! Great thinking behind this update. This will make a huge change for improved design system setup!! 😍
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).
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!
Great release! But I still don't see an option to create "Master" button component and its children (also turned into components so they are nested) create variants. It seems like I can only use top-level components for variants, is that right?
It is nice to adjust auto-layout settings, border radius, icon size and so one on just one component so my "state" components would catch up
Oh... Found out that I can create master component -> crate instance -> convert instance to component -> create variants with it. Works fine. Sorry :)
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.
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: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html
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?
WOW! Amazing video, great feature! Thanks :D
Not helpful when the UI has changed.
What about prototypes working as I hover, click, etc. the button?
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: th-cam.com/video/Jeqyvp-hfmk/w-d-xo.html
This is coming in February I think. They did a video on this recently!
@@Figma Cool! Thanks a lot! And I still waiting for Figma in Portuguese 😆🇧🇷
How can I create nested properties? For example I only want to be able to grey out a radio button if it is unselected. So once the 'selected' property is set to false, a new 'active' property appears that I can toggle on and off.
Wouldn't a boolean property be a better way to manage the checked/unchecked states of the check box?
2:43 Why did you use a frame instead of a rectangle to create the checkbox component?
Hey Deborah, Frames are a single layer, if we were to use a rectangle instead it would result in two layers (a rectangle inside of a frame/component). Using only a Frame simplifies the layers panel/layer structure to keep our files cleaner, and also prevents us from needing to add constraints to the nested rectangle to keep it responsive if we were to resize the checkbox. If you're relying on using background rectangles for surfaces, I encourage you to try using Frames wherever you can! 🙂
Is there a version of this video that lists the Windows keyboard shortcuts, or is Figma designed specifically for Apple devices?