For the toggle you can also use "true/false". When I get home I'm gonna test out a few others like "active/inactive" and see if they work too. Toggles are handy.
Hey brother, great video! Just wanted to mention now you can assign a property to the layer to toggle it to show or hide which takes away the need to make so many variants. Much love.
thank you!!!!!!!! would love more UI videos from you. I really appreciate all the finer details you mention about what the best practices are for variants and design systems :')
This is the sweetest, most well-deserved "Subscribe to my channel" I ever heard. Was just about closing the video when I heard it, and had to come back to click on "Subscribe". More importantly, Thanks Dennis, this tutorial was super super helpful! ❤️
this video is so helpful, very well explained and made me realize some missing links in my understanding of components and creating variants. thanks so much 🤜🏿🤛🏻
TNice tutorials the best tutorial I've ever watched! Super informatic and love the softow in wNice tutorialch you taught everytNice tutorialng. Thanks a lot
Great stuff. Picked up alot of practical tips here. Never knew on/off work to make boolean operators. I've heard of yes/no as well, what I've used so far is true/false. The way you duplicated buttons and framed the variant sections to make auto layout is fantastic. Thanks for sharing!
@@CortesArts Yeah, an interesting topic would be how you establish a team within Figma, how to produce or structure files that gets published to "receiving" users and how to both add team members to the shared project file that get's published and how to invite users of the shared library etc. This whole library and publishing bit in Figma isn't that well covered I think. I find fragments here and there on YT but it's not covered in detail. So it's a topic of using Figma in a corporate environment so to speak. This part of Figma is living its own parallel life "outside" of the design editor section and I'm keen to learn more about it. Think that would suit a video.
Lord!!! I was tasked to making designing system for my company a (start up) and I’ve been trying to understand Autolayout , component set, variant how they work this was really helpful… please are there more contents / tips on how to make a mini Design system please?
Happy I could help! I have a few other videos on this topic but happy to make a specific one if that would help. What would you want to see in that video?
@@CortesArts Yes please I'd really appreciate that. mainly I've been doing my research and most buzz words like design tokens was wondering what they are. mainly I'm starting out I'd check out your videos on AUTOLAYOUT, COMPONENT SET, VARIANTS
When you said you make music, I thought you looked familiar and played in a band called Big Scary. Doppleganger! Love the video - super concise and helpful! Cheers
really well explained and loved the work along part of it. Had a query though, why does the 1st button you created doesn't show up on the 'Local Components' list. Thanks in advance.
Thank you so much, love this video so much, I like the way you explain the whole process, the speed of your voice, the extra tips while you were doing the example, I'm quite new at build components and systems and this video has been so helpful, once again thank you 😊
Great content. Although I've been using figma for a while, never did it this way. Will add something new to my workflow definitely. Btw toggles can be made with true/false also, I didn't even know for yes/no 😲
Hello, can you update this video with new use of variants in Figma please? I couldn't figure out how to create on-off variants with Figma's new interface. Thanks
Great video, thanks! Shame about the explosion of state, each time you add a new property you have to double the number of variants. Do you know if there is a way around this?
Hi! So you'll want to create an icon component separately from this with Variants, and then nest that icon component in this button. You'll be able to select the icon within the button component with a dropdown of all the icon Variants you have available in the icon component. Hope that helps!
Thank you for the feedback, I'll note that for future videos! Not sure if it's helpful, but UA-cam has a playback speed option to play videos slower that has helped me in the past 👍🏼
Not a dumb question! I forgot to cover this in the video but adding a "_" at the front of your base component will hide it from the Assets panel. It's important to note the underscore trick only works for files outside of your library as it hides it from being published to the library that other files have access to. It will still be visible in the file you are in, and I recommend having your components in their own file instead of within the design file you are working on. Hope that helps!
What did you do at 11:52 to select the Arrow/Right component instances instead of the shapes? Sometimes hard to follow without seeing what keyboard shortcuts you're using.
Would it be more optimal to consolidate icon values into one property & drop down (ie none, left, right?) This approach will prevent mutually exclusive options from being selected which currently showing both left & right icons is a possibility but isn't an actual use case.
If you don't create the actual variant that has left and right icons both on, when you click Right, Left will be automatically toggled off and vice-versa. The first time I noticed this it threw me off for a few seconds, thinking it's a bug. Then I realized "oh, wait, Figma is actually smart about this!". :)
@@adrian.diaconescu it's probably debatable if this a good experience or not. It can be argued that more complex variable combinations that have dependencies could provide a jarring experience if toggles automatically switch on & off.
You can place your icon component within the button auto layout! That way you can turn the icon on and off in variants and be able to change the icon you’re using in it. Hope that helps 😊
*At **6:52* to change from the Layers to Assets tab, you can press "Option/Alt + 2" on your keyboard. You can also press "Option/Alt + 1" instead to switch back to the Layers tab. *At **11:51* to navigate between nested layers, you can press "Enter" to go deeper into layers or press "Shift + Enter" to do the opposite. Hope that helps!
Variable widths for buttons is a common practice in my experience! If you think about it, it's easier to code a button that has the same amount of padding each time versus setting a predetermined width for every instance. You'll run into issues with responsiveness and copy being too long for buttons if you go the predetermined width route. Hope that helps!
@@CortesArts really helped. First I followed this 3 widths role and I was not satisfyed becase it was not really scalable, was only consistent in the width. But now you say that having variable width is a common thing around there, I'm sure I will changing to your way. THANK YOU VERY MUCH
Hi thank you so much for a great tutorial. I wanted to ask about the master component that you keep out of the variable set. It appears in the assets panel as well as the parent component that is part of the variable set. How do you deal with that? because it of course opens door to future error, because people might use a wrong instance of a button in their design if they pick the wrong one (by mistake). Many thanks!
Adding the "_" somehow does not work for me. But it seems that the base button in your design does not have that "_" or am I wrong? It looks that you have moved it onto separate board (perhaps named Base) and simply keep it there? is that the case?
Hi! So the "_" trick only works for files outside of your library as it hides it from being published to the library that other files have access to. It will still be visible in the file you are in, and I recommend having your components in their own file instead of within the design file you are working on. Hope that helps!
I am trying this since 2 hours and my Toolbar at right side does not match. It says "current Variant" and does not show the pills of the Variant Types. I can not add a new property and name Yes no, I have a drop down which says true and false. I can not select the variants and st them individually to true false or yes no. Can somebody help?
This is *almost* exactly what I have been looking for to create loads of button options. However, the one issue I am running into is that you can only stretch the width of master button, not of the variants that we made. So, for example, if I need a button to fill a whole column vs just having a specific padding, I can't do that. But with regular button variations that don't have a master button I can. Is there any work around for this, or am I missing something?
This is exactly what I didn't know I needed to know. Thanks so much for the tips! This is going to greatly improve my work flow!!
Of course, happy I could help! Let me know if you have any questions or requests 😊
@@CortesArts why does the TEXT tool has extra padding?
While adobe XD is wrap with no extra padding?
The best video to get how variants work!!!))) Thanks bro
I am completely new in Figma - and this is so awesome tutorial!!! Thanks!
For the toggle you can also use "true/false".
When I get home I'm gonna test out a few others like "active/inactive" and see if they work too. Toggles are handy.
Best soft soft Introduction Ever!!
Yay, thank you!
Awesome stuff. Would be good to see you make a "mini" design system from scratch.
Can do! I have a couple design systems videos already as well that might be helpful :)
@@CortesArts They are really helpful but can you do the 3rd video as well? Beginners like me would find your design system video extremely useful :).
Love your video a lot, quite helpful. Could you make an updated version using Component properties.
I saw a lot of videos on auto layouts and components but somehow this one is the best. Thanks Dennis
Thanks so much! If you have any requests for other videos please let me know 🙂
Hey brother, great video! Just wanted to mention now you can assign a property to the layer to toggle it to show or hide which takes away the need to make so many variants. Much love.
best tutorial i've seen so far.
Thanks so much!
thank you!!!!!!!! would love more UI videos from you. I really appreciate all the finer details you mention about what the best practices are for variants and design systems :')
Perfect explanation Dennis
TNice tutorials is exactly what I needed to understand the UI. Great tutorial!
Thanks for the kind words! So happy I could help 😄
This is the sweetest, most well-deserved "Subscribe to my channel" I ever heard. Was just about closing the video when I heard it, and had to come back to click on "Subscribe".
More importantly, Thanks Dennis, this tutorial was super super helpful! ❤️
Means a lot to hear that, happy to have you here! If you have any requests for other videos please let me know 🙂
Wow, learned something new. Variants design went to next level because of you (and figma ;p )
Haha thanks so much, such a powerful feature! If you have any requests for other videos please let me know 🙂
Thank you. This is the best video ever
It's very sucessfull work. You are great instructive really. I love that!
Very cool Dennis, thank for this great tutorial 🙏
amazing tutorial..thanks alot....
Very nicely explained, and I am going to check your music 🙂
Thanks so much, enjoy!
Incredibly informative. As soone with no background in soft other than so Nice tutorialgh school band, I completely understand everytNice tutorialng
You're very welcome!
OMG this video is SO GOOD! Congratulations man on the explanation!
Thanks so much! Glad it was helpful 🙂
THIS IS REALLY REALLY HELPFFUL VIDEO
So glad it was helpful! If you have any requests for other videos please let me know 🙂
Thanks for this video! very usefull tips
Thank you! The video was great and helped me understand the matter better
This was great, thank you so much. Subscribed!
Great Video! Best I've seen explaining this concept. How can I swap icons across this button component though?
Absolutely Fantastic. Thank you for making this video.
Ayy Designer + Music Producer.. cheers brooo
Both of my life passions 😎 thank you!
Same here bro 😎
Awesome Bro , Thanks Tips & Tricks Variant Component 🔥
Anytime! Glad it was helpful :)
this video is so helpful, very well explained and made me realize some missing links in my understanding of components and creating variants. thanks so much 🤜🏿🤛🏻
Glad it was helpful!
Very well explained.. Thanks :)
This is very helpful! Thank you
This was really helpful, Thanks Dennis ❤
Glad it was helpful! If you have any requests for other videos please let me know 🙂
TNice tutorials the best tutorial I've ever watched! Super informatic and love the softow in wNice tutorialch you taught everytNice tutorialng. Thanks a lot
Thank you, glad it was helpful!
Great stuff. Picked up alot of practical tips here. Never knew on/off work to make boolean operators. I've heard of yes/no as well, what I've used so far is true/false. The way you duplicated buttons and framed the variant sections to make auto layout is fantastic. Thanks for sharing!
Great to hear that, glad it was helpful! If you have any requests for other videos please let me know 🙂
@@CortesArts Yeah, an interesting topic would be how you establish a team within Figma, how to produce or structure files that gets published to "receiving" users and how to both add team members to the shared project file that get's published and how to invite users of the shared library etc. This whole library and publishing bit in Figma isn't that well covered I think. I find fragments here and there on YT but it's not covered in detail. So it's a topic of using Figma in a corporate environment so to speak. This part of Figma is living its own parallel life "outside" of the design editor section and I'm keen to learn more about it. Think that would suit a video.
Really great. Learnt something new. Please make more videos for us.
Thanks so much! Glad it was helpful, I definitely will 🙂
This is awesome! and Great content at all
Thanks so much! If you have any requests for other videos please let me know 🙂
wow just amazing ! thank you so much this is super helpful
This is what I'm searching for to learn... thank you so much Dennis :)
Glad it was helpful!
a nice method using and making Variants easily, good work!
Thank you!! Let me know if you have any questions or requests 😊
Great stuff!!!!! Just learnt a more efficient way to use autolayouts. Thanks!!!!!
Awesome! Happy I could help 🙌🏼
Lord!!! I was tasked to making designing system for my company a (start up) and I’ve been trying to understand Autolayout , component set, variant how they work this was really helpful… please are there more contents / tips on how to make a mini Design system please?
Happy I could help! I have a few other videos on this topic but happy to make a specific one if that would help. What would you want to see in that video?
@@CortesArts Yes please I'd really appreciate that. mainly I've been doing my research and most buzz words like design tokens was wondering what they are. mainly I'm starting out I'd check out your videos on AUTOLAYOUT, COMPONENT SET, VARIANTS
When you said you make music, I thought you looked familiar and played in a band called Big Scary. Doppleganger! Love the video - super concise and helpful! Cheers
I wish I was that cool 😂 thank you for the kind words!
Dude, this is amazing!
Much appreciated, thank you! If you have any requests for other videos please let me know 🙂
thanks for the tip, you are amazing
This is very helpful. btw do you look like David Wallace from 'the Office' or is it just me 😅
really well explained and loved the work along part of it. Had a query though, why does the 1st button you created doesn't show up on the 'Local Components' list. Thanks in advance.
great guide!
Thank you so much, love this video so much, I like the way you explain the whole process, the speed of your voice, the extra tips while you were doing the example, I'm quite new at build components and systems and this video has been so helpful, once again thank you 😊
I appreciate the kind words, happy I could help!
Insightful content and easy to follow! Thanks so much for the great video!❤
Glad you enjoyed it! If you have any requests for other videos please let me know 🙂
Very helpful. thanks for the video
Of course, glad to hear it helped! Let me know if you have any questions or requests 😊
Thanks man!
Very clear, bravo!
Great content. Although I've been using figma for a while, never did it this way. Will add something new to my workflow definitely. Btw toggles can be made with true/false also, I didn't even know for yes/no 😲
Also with on and off
Happy you found it helpful, thank you!
So cool, thanks!
Learned something.
thanks
Thanks a lot for this, its something I've always wanted to know how its done. Thank You So Much🥺❤
Thank you for the kind words, glad I could help!
amazing, you explained it so well
Glad it was helpful!
Hello, can you update this video with new use of variants in Figma please? I couldn't figure out how to create on-off variants with Figma's new interface. Thanks
Yes! In my immediate plans to do that in the next couple videos, thank you for your patience 🙂
Great job man! Great video!
Thanks so much! Glad it was helpful 😄
We've gone so much ahead in this video xD
thanks, awesome information
Happy I could help! If you have any requests for other videos please let me know 🙂
great job man, really helpfull , me subscribed. :)
Appreciate it, glad I could help!
what throws off is the step sequencer. i ntally associate it with a soft/clip whether it's being used or not. also when you do
Thank you very much you are amazing please upload how to use color and how to be creative give me the tips once again Thanks
so much to learn
This was really helpful, thanks a lot :)
Of course! Glad I could help, let me know if you have any questions or requests 😊
Really...Great videos learns lots of from it. Thanks for sharing with us :)
Of course! Means a lot to hear that and happy I could help 😊
that was helpful . thanks.
Happy I could help! If you have any requests for other videos please let me know 🙂
I subscribed my dude, Thankyou.
Thanks so much! Let me know if you have any questions or requests 😊
thank you so much i ve learned a lot from your video
so amazing perfect tuto
Thank you! If you have any requests for other videos please let me know 🙂
The UI has changed. At 11:00 I get lost. How do you add a new property to the group in the new UI?
😎 big thanks 👍 dude..
Great video, thanks! Shame about the explosion of state, each time you add a new property you have to double the number of variants. Do you know if there is a way around this?
I don’t think so at the moment, that’s one of my biggest gripes with Variants at the moment 😞
Yeah, same here. They should introduce the way of programming the appearance rules as well
Had the same thought, seems this is fixed in figma today: ua-cam.com/video/iIq8FLt1hUY/v-deo.html cheers
True or false is also allowed to have that boolean toggle.
Thx man..god bless you
You're welcome, glad it was helpful!
This was so helpful! But if I create an instance, how do I change the icon for that instance? I'm having trouble getting it to work. Is it possible?
Hi! So you'll want to create an icon component separately from this with Variants, and then nest that icon component in this button. You'll be able to select the icon within the button component with a dropdown of all the icon Variants you have available in the icon component. Hope that helps!
@@CortesArts Thanks so much! That makes sense.
Pls clarify my doubt sir does it have tabla soft????? Pls tell sir
You're just too good
What about with variants of buttons with different tooltip on hover states ?
can we move icon to left if we have icon in right in master component?
Thanks!
Too kind, thank you so much!
Perfect!
Hey Dennis! Thank you so much for this helpful video. I have a question at 12:03, which command did you use to hide those icon ? Thank you
Well, you can simply use the delete button. Auto-layout is smart it automatically hides those icons except for deleting them.
Can I resize these buttons while using it in my design?
Yes!
thank you for the video Dennis but it would be nice if you slow down a little when your trying to teach other than that its great!
Thank you for the feedback, I'll note that for future videos! Not sure if it's helpful, but UA-cam has a playback speed option to play videos slower that has helped me in the past 👍🏼
So what do you do with the master so it's not in your local components? Maybe this is a dumb question, but I'm a beginner
Not a dumb question! I forgot to cover this in the video but adding a "_" at the front of your base component will hide it from the Assets panel. It's important to note the underscore trick only works for files outside of your library as it hides it from being published to the library that other files have access to. It will still be visible in the file you are in, and I recommend having your components in their own file instead of within the design file you are working on. Hope that helps!
@@CortesArts awesome. Thank you!! My Figma was being super buggy yesterday. Your videos are super helpful! Thank you! I’m def a subscriber now!
What did you do at 11:52 to select the Arrow/Right component instances instead of the shapes? Sometimes hard to follow without seeing what keyboard shortcuts you're using.
Figured it out. Shift + Return
Would it be more optimal to consolidate icon values into one property & drop down (ie none, left, right?) This approach will prevent mutually exclusive options from being selected which currently showing both left & right icons is a possibility but isn't an actual use case.
If you don't create the actual variant that has left and right icons both on, when you click Right, Left will be automatically toggled off and vice-versa. The first time I noticed this it threw me off for a few seconds, thinking it's a bug. Then I realized "oh, wait, Figma is actually smart about this!". :)
@@adrian.diaconescu it's probably debatable if this a good experience or not. It can be argued that more complex variable combinations that have dependencies could provide a jarring experience if toggles automatically switch on & off.
Definitely an option as well, I’ve seen systems that support having both on at the same time as well so just depends on what you’re going for!
it was wonderful
Glad you found it helpful!
How would we extend this to swap an icon for another icon in our library?
You can place your icon component within the button auto layout! That way you can turn the icon on and off in variants and be able to change the icon you’re using in it. Hope that helps 😊
At 6:52, what shortcut did you use to change to Asset?
At 11:51, how can you change layers for chose them like that?
*At **6:52* to change from the Layers to Assets tab, you can press "Option/Alt + 2" on your keyboard. You can also press "Option/Alt + 1" instead to switch back to the Layers tab. *At **11:51* to navigate between nested layers, you can press "Enter" to go deeper into layers or press "Shift + Enter" to do the opposite. Hope that helps!
what a gem
Thanks so much!!
please, how do i save my components and retrieve them for future use
Publish them in the file as a library and turn on that library in the file you’d like to use it in!
Making the button hug the content (text) don't make us loose consistency as each text will make buttons have lots of different widths?
Variable widths for buttons is a common practice in my experience! If you think about it, it's easier to code a button that has the same amount of padding each time versus setting a predetermined width for every instance. You'll run into issues with responsiveness and copy being too long for buttons if you go the predetermined width route. Hope that helps!
@@CortesArts really helped. First I followed this 3 widths role and I was not satisfyed becase it was not really scalable, was only consistent in the width.
But now you say that having variable width is a common thing around there, I'm sure I will changing to your way.
THANK YOU VERY MUCH
Hi thank you so much for a great tutorial. I wanted to ask about the master component that you keep out of the variable set. It appears in the assets panel as well as the parent component that is part of the variable set. How do you deal with that? because it of course opens door to future error, because people might use a wrong instance of a button in their design if they pick the wrong one (by mistake). Many thanks!
Adding the "_" somehow does not work for me. But it seems that the base button in your design does not have that "_" or am I wrong? It looks that you have moved it onto separate board (perhaps named Base) and simply keep it there? is that the case?
Hi! So the "_" trick only works for files outside of your library as it hides it from being published to the library that other files have access to. It will still be visible in the file you are in, and I recommend having your components in their own file instead of within the design file you are working on. Hope that helps!
I am trying this since 2 hours and my Toolbar at right side does not match. It says "current Variant" and does not show the pills of the Variant Types. I can not add a new property and name Yes no, I have a drop down which says true and false. I can not select the variants and st them individually to true false or yes no. Can somebody help?
This is *almost* exactly what I have been looking for to create loads of button options. However, the one issue I am running into is that you can only stretch the width of master button, not of the variants that we made. So, for example, if I need a button to fill a whole column vs just having a specific padding, I can't do that. But with regular button variations that don't have a master button I can. Is there any work around for this, or am I missing something?
If I understand correctly, in the instance you need to set the base component to fill instead of hug I believe!