How to Design Powerful Components and Buttons with Variants and Auto Layout in Figma (NEW)
Vložit
- čas přidán 29. 09. 2021
- Learn design, Figma, or review your portfolio with me: cortes.us/learn
My newsletter: getrevue.co/profile/shyboytm
In this video, I'll go over my approach to building scalable components in Figma using Variants, Variant Groups, and Auto Layout. While there are many ways to build components, this is the way that I have found to be the most helpful for design systems and scaling a design team.
This video touches on the basics from definitions of each feature, to more advanced methods of building out different types of variants in Figma. These are a great foundation for all product designers and UX designers to know!
🙏 SUPPORT ME ON PATREON
Get early access to videos, participate in Q&As, get my unreleased music and Figma source files, and exclusive updates on Patreon! / shyboytm
🎧 MUSIC
Lofi Beats to Create, Design, and Code to (Royalty Free): • Lofi Hip Hop Beats to ...
Background music by Cordio (me!): cortes.us/music
Looking for a record label? Try DistroKid: distrokid.com/vip/seven/799422
Access millions of samples on Splice: splice.com/vip/fromcortes
☕ PROJECTS
Buy my iOS 15 icon set at osicons.com
Learn about Taste Notes, a coffee tracking app at tastenotes.app
💻 SETUP
Interested in my setup? Everything I use is here: www.cortes.us/tools
📹 RELATED VIDEOS
How and Why to Use an 8pt Grid for Product and Website Design in Figma (Tutorial): • How and Why to Use an ...
How to Interview for Design IC and Leadership Roles in UX and Product Design: • How to Interview for D...
How I Got Into Product Design and My Career: • How to Make Component ...
👋 SOCIALS
Twitter: / shyboytm
Instagram: / shyboytm
Dribbble: www.dribbble.com/shyboytm
Website: www.cortes.us
Contact: hi@cortes.us
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 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?
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 🙂
I am completely new in Figma - and this is so awesome tutorial!!! Thanks!
The best video to get how variants work!!!))) Thanks bro
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!
Absolutely Fantastic. Thank you for making this video.
OMG this video is SO GOOD! Congratulations man on the explanation!
Thanks so much! Glad it was helpful 🙂
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 🙂
Love your video a lot, quite helpful. Could you make an updated version using Component properties.
Thank you! The video was great and helped me understand the matter better
Very cool Dennis, thank for this great tutorial 🙏
This was great, thank you so much. Subscribed!
wow just amazing ! thank you so much this is 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 🤜🏿🤛🏻
Glad it was helpful!
Thank you. This is the best video ever
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.
This is very helpful! Thank you
TNice tutorials is exactly what I needed to understand the UI. Great tutorial!
Thanks for the kind words! So happy I could help 😄
a nice method using and making Variants easily, good work!
Thank you!! Let me know if you have any questions or requests 😊
This was really helpful, Thanks Dennis ❤
Glad it was helpful! If you have any requests for other videos please let me know 🙂
Very clear, bravo!
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.
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 🙂
Very well explained.. Thanks :)
So cool, thanks!
This is awesome! and Great content at all
Thanks so much! If you have any requests for other videos please let me know 🙂
Best soft soft Introduction Ever!!
Yay, thank you!
Thanks for this video! very usefull tips
This was really helpful, thanks a lot :)
Of course! Glad I could help, let me know if you have any questions or requests 😊
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!
best tutorial i've seen so far.
Thanks so much!
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 🙂
Perfect explanation Dennis
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 😊
It's very sucessfull work. You are great instructive really. I love that!
Great job man! Great video!
Thanks so much! Glad it was helpful 😄
Great stuff!!!!! Just learnt a more efficient way to use autolayouts. Thanks!!!!!
Awesome! Happy I could help 🙌🏼
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.
amazing, you explained it so well
Glad it was helpful!
Really great. Learnt something new. Please make more videos for us.
Thanks so much! Glad it was helpful, I definitely will 🙂
great guide!
Awesome Bro , Thanks Tips & Tricks Variant Component 🔥
Anytime! Glad it was helpful :)
thanks for the tip, you are amazing
great job man, really helpfull , me subscribed. :)
Appreciate it, glad I could help!
Thanks man!
Dude, this is amazing!
Much appreciated, thank you! If you have any requests for other videos please let me know 🙂
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.
amazing tutorial..thanks alot....
Very nicely explained, and I am going to check your music 🙂
Thanks so much, enjoy!
Very helpful. thanks for the video
Of course, glad to hear it helped! Let me know if you have any questions or requests 😊
Learned something.
thanks
thank you so much i ve learned a lot from your video
THIS IS REALLY REALLY HELPFFUL VIDEO
So glad it was helpful! If you have any requests for other videos please let me know 🙂
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!
Perfect!
😎 big thanks 👍 dude..
thanks, awesome information
Happy I could help! If you have any requests for other videos please let me know 🙂
that was helpful . thanks.
Happy I could help! If you have any requests for other videos please let me know 🙂
so much to learn
I subscribed my dude, Thankyou.
Thanks so much! Let me know if you have any questions or requests 😊
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!
Thx man..god bless you
You're welcome, glad it was helpful!
Great Video! Best I've seen explaining this concept. How can I swap icons across this button component though?
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!
so amazing perfect tuto
Thank you! If you have any requests for other videos please let me know 🙂
Thanks!
Too kind, thank you so much!
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 :).
it was wonderful
Glad you found it helpful!
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!
Ayy Designer + Music Producer.. cheers brooo
Both of my life passions 😎 thank you!
Same here bro 😎
You're just too good
what a gem
Thanks so much!!
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
This is very helpful. btw do you look like David Wallace from 'the Office' or is it just me 😅
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.
Thanks for sharing. But thinking about a bit more complex components, is it cool to have many elements being there, but hidden within an instance? All those not necessary elements being just not visible kinda seems to be then crazy, or how do you think about that? (e.g. two icons, both can be there maybe sth else)
Great point! I do indeed add everything to the Base component, and then hide based on the Variant being used. It's worth it in the long run in my experience!
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!
We've gone so much ahead in this video xD
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
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!
can we move icon to left if we have icon in right in master component?
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
Great
Thank you!
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
What about with variants of buttons with different tooltip on hover states ?
Thanks Dennis, this was great, but I have a question! when I'm finished with everything, my Asset list shows me both buttons, the one we started from (a component outside the variant box) and the same primary one from variants with all the settings (they look identical, since the source button and the first variant are the same, hopefully I'm explaining this clearly) - in your example this does not behave like that, any idea as to what a reason for this is?
I came here for the exact same question. Prefixing a period or underscore to the base component doesn't do anything. I'm assuming it has to do with trying the free version, without teams maybe?
@@plokkum this happened on Professional for me though
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!
спасибоооо!
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!
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!
I get it
Dennis, you have any issues with instance overrides (color changes, icon swaps, button text etc.)? Even with identical layer naming, overrides are not maintained when toggling between variants... Trying to figure out if its a Figma issue.
Hmm I haven’t run into that issue with this example but has happened to me elsewhere. I’d double check that you have a variant for each of the ones you are trying to make 👍
@@CortesArts Thanks for the response. Unfortunately I do have variants for each button and even nested instances within for easy icon swaps. Seems to be a larger Figma issue, where overrides aren't prioritized when switching between variants (in a group). Great vids though, cheers
The UI has changed. At 11:00 I get lost. How do you add a new property to the group in the new UI?
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
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 🙂
True or false is also allowed to have that boolean toggle.
👏👏👏
3:00 How did u create the toggles for icon right and icon left on the same page?
I made variations for each of those!
Dennis Cortes I don't have information about their preparing process. Do u have any reference video?
I noticed you named the master component 'button'. But when using Assets panel and search for button, how will you know which one is the master component or the variant?
I forgot to show it, but if you add “_” at the beginning to the base component name, it won’t show up there!