How to Design Powerful Components and Buttons with Variants and Auto Layout in Figma (NEW)

[@pomekon]

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

[@CortesArts]

Of course, happy I could help! Let me know if you have any questions or requests 😊

[@servalpunk7411]

@@CortesArts why does the TEXT tool has extra padding? While adobe XD is wrap with no extra padding?

[@sherrimoss20]

Thanks!

[@CortesArts]

Too kind, thank you so much!

[@headkicked]

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.

I am completely new in Figma - and this is so awesome tutorial!!! Thanks!

[@emmaarizzi55]

Best soft soft Introduction Ever!!

[@CortesArts]

Yay, thank you!

[@valbalano5811]

I saw a lot of videos on auto layouts and components but somehow this one is the best. Thanks Dennis

[@CortesArts]

Thanks so much! If you have any requests for other videos please let me know 🙂

[@JaspervanderKamp]

Wow, learned something new. Variants design went to next level because of you (and figma ;p )

[@CortesArts]

Haha thanks so much, such a powerful feature! If you have any requests for other videos please let me know 🙂

[@Dachinzzz]

Love your video a lot, quite helpful. Could you make an updated version using Component properties.

[@mirwayss]

The best video to get how variants work!!!))) Thanks bro

[@wings8099]

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 :')

[@victoremisho9432]

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! ❤️

[@CortesArts]

Means a lot to hear that, happy to have you here! If you have any requests for other videos please let me know 🙂

[@narengaurav4818]

best tutorial i've seen so far.

[@CortesArts]

Thanks so much!

[@srinivasa.meesala]

TNice tutorials is exactly what I needed to understand the UI. Great tutorial!

[@CortesArts]

Thanks for the kind words! So happy I could help 😄

[@yeminhtun2543]

Ayy Designer + Music Producer.. cheers brooo

[@CortesArts]

Both of my life passions 😎 thank you!

[@yeminhtun2543]

Same here bro 😎

[@Gobbatman]

OMG this video is SO GOOD! Congratulations man on the explanation!

[@CortesArts]

Thanks so much! Glad it was helpful 🙂

[@priyankabhimte3396]

Very nicely explained, and I am going to check your music 🙂

[@CortesArts]

Thanks so much, enjoy!

[@josephkelly9564]

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.

[@patrickojeh]

Awesome stuff. Would be good to see you make a "mini" design system from scratch.

[@CortesArts]

Can do! I have a couple design systems videos already as well that might be helpful :)

[@maihuynh7776]

@@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 :).

[@f3a-mhamed637]

Incredibly informative. As soone with no background in soft other than so Nice tutorialgh school band, I completely understand everytNice tutorialng

[@CortesArts]

You're very welcome!

[@asafros12]

Thank you! The video was great and helped me understand the matter better

[@isagive]

Very cool Dennis, thank for this great tutorial 🙏

[@AbdussalamPopoola]

Perfect explanation Dennis

[@sofyanridwan22]

Awesome Bro , Thanks Tips & Tricks Variant Component 🔥

[@CortesArts]

Anytime! Glad it was helpful :)

[@alexisarnold2531]

This was great, thank you so much. Subscribed!

[@osamahaashir6145]

THIS IS REALLY REALLY HELPFFUL VIDEO

[@CortesArts]

So glad it was helpful! If you have any requests for other videos please let me know 🙂

[@roanacedev]

This is awesome! and Great content at all

[@CortesArts]

Thanks so much! If you have any requests for other videos please let me know 🙂

[@kyiphyukhin7562]

Thank you. This is the best video ever

[@abhinavkashyap5791]

Absolutely Fantastic. Thank you for making this video.

[@rjcreations3801]

This is what I'm searching for to learn... thank you so much Dennis :)

[@CortesArts]

Glad it was helpful!

[@bus2895]

It's very sucessfull work. You are great instructive really. I love that!

[@scottdamien8395]

a nice method using and making Variants easily, good work!

[@CortesArts]

Thank you!! Let me know if you have any questions or requests 😊

[@KaidyCamille]

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 🤜🏿🤛🏻

[@CortesArts]

Glad it was helpful!

[@rmalsen3052]

The UI has changed. At 11:00 I get lost. How do you add a new property to the group in the new UI?

[@gabypino407]

Thanks for this video! very usefull tips

[@kunalhindocha]

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.

[@babiiotpus]

thank you so much i ve learned a lot from your video

[@elizabethantai3408]

Really great. Learnt something new. Please make more videos for us.

[@CortesArts]

Thanks so much! Glad it was helpful, I definitely will 🙂

[@ashanniroshana99]

This was really helpful, Thanks Dennis ❤

[@CortesArts]

Glad it was helpful! If you have any requests for other videos please let me know 🙂

[@Underhills]

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]

Great to hear that, glad it was helpful! If you have any requests for other videos please let me know 🙂

[@Underhills]

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

[@franalcal7089]

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

[@CortesArts]

Thank you, glad it was helpful!

[@JuiceDont]

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

[@CortesArts]

I wish I was that cool 😂 thank you for the kind words!

[@Sharonexplores]

amazing tutorial..thanks alot....

[@Jsosa787]

Great Video! Best I've seen explaining this concept. How can I swap icons across this button component though?

[@nbulwinkel]

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 😊

[@CortesArts]

I appreciate the kind words, happy I could help!

[@mikezou9929]

wow just amazing ! thank you so much this is super helpful

[@mrq_design]

Dude, this is amazing!

[@CortesArts]

Much appreciated, thank you! If you have any requests for other videos please let me know 🙂

[@jayreambonanza1991]

This is very helpful! Thank you

[@tamtamngo6533]

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?

[@CortesArts]

*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!

[@j.k24]

great job man, really helpfull , me subscribed. :)

[@CortesArts]

Appreciate it, glad I could help!

[@stibej]

Great stuff!!!!! Just learnt a more efficient way to use autolayouts. Thanks!!!!!

[@CortesArts]

Awesome! Happy I could help 🙌🏼

[@canersanli]

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

[@CortesArts]

Yes! In my immediate plans to do that in the next couple videos, thank you for your patience 🙂

[@saskiagittner8127]

My Toolbar at the right has different Options -that is why I can not give the Variants an boolean property only the whole component. The difference in the tools and masks to my file starts at 8:31 in the Video

[@CortesArts]

Unfortunately Figma has since updated how AutoLayout works so although the same principles apply, the UI does not look the same anymore

[@pankajmanjrekar]

Very well explained.. Thanks :)

[@zoeyennguyen8969]

Insightful content and easy to follow! Thanks so much for the great video!❤

[@CortesArts]

Glad you enjoyed it! If you have any requests for other videos please let me know 🙂

[@SAM-Aang]

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

[@IrfanAli-ts7dd]

Very helpful. thanks for the video

[@CortesArts]

Of course, glad to hear it helped! Let me know if you have any questions or requests 😊

[@patrickrushton]

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.

[@patrickrushton]

Figured it out. Shift + Return

[@monlifes]

So cool, thanks!

[@danielgoldberg4235]

great guide!

[@JarlHelin]

Very clear, bravo!

[@livelovelaughlll2936]

thanks for the tip, you are amazing

[@marv_reginald]

Thanks a lot for this, its something I've always wanted to know how its done. Thank You So Much🥺❤

[@CortesArts]

Thank you for the kind words, glad I could help!

[@hangluong5668]

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

[@AnilYadav-dd1pv]

Well, you can simply use the delete button. Auto-layout is smart it automatically hides those icons except for deleting them.

[@amjadwithj]

Thanks man!

[@nanimattt]

amazing, you explained it so well

[@CortesArts]

Glad it was helpful!

[@m4celo]

Great job man! Great video!

[@CortesArts]

Thanks so much! Glad it was helpful 😄

[@rhysfinley5772]

3:00 How did u create the toggles for icon right and icon left on the same page?

[@CortesArts]

I made variations for each of those!

[@rhysfinley5772]

Dennis Cortes I don't have information about their preparing process. Do u have any reference video?

[@merisimamovic965]

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 😲

[@Mayank-rs7kg]

Also with on and off

[@CortesArts]

Happy you found it helpful, thank you!

[@greggles_b]

At 12:40, when you drag in an instance of the button with variants, how come you only have 1 component whereas I can see both the base component we created at the start as well as the button component with variants? Do I need to hide or delete the base component? Thanks!

[@tanyacequi6556]

You need to add a “.” or “_” at the beginning of the base component name. This way base components will be “hidden”

[@greggles_b]

@@tanyacequi6556 awesome, thanks!

[@patrickrushton]

@@tanyacequi6556 That would hide the base components when publishing. But I don't know how he ended up with just the variants component in his local library. Seems something was skipped over.

[@georgesketch]

This is very helpful. btw do you look like David Wallace from 'the Office' or is it just me 😅

[@princeisaac5177]

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?

[@CortesArts]

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?

[@princeisaac5177]

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

[@ataulhayeekamran5160]

thanks, awesome information

[@CortesArts]

Happy I could help! If you have any requests for other videos please let me know 🙂

[@shahabuddinahmedohi8788]

Really...Great videos learns lots of from it. Thanks for sharing with us :)

[@CortesArts]

Of course! Means a lot to hear that and happy I could help 😊

[@patrickrushton]

Did you skip something at 12:39? I end up with two local components in my local library, one for the base component and another for the variants group (is that the term?) Did you just delete the base component?

[@CortesArts]

Hi! You'll have to add "_" to the front of the base component. I forgot to go over that in the video, sorry about that!

[@manjushapawar8608]

This was really helpful, thanks a lot :)

[@CortesArts]

Of course! Glad I could help, let me know if you have any questions or requests 😊

[@greggles_b]

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?

[@CortesArts]

I don’t think so at the moment, that’s one of my biggest gripes with Variants at the moment 😞

[@secession77]

Yeah, same here. They should introduce the way of programming the appearance rules as well

[@andreaskramer6231]

Had the same thought, seems this is fixed in figma today: kzbin.info/www/bejne/n3rUaXmCqZabi7s cheers

[@schnoonglaandiageckeler187]

I subscribed my dude, Thankyou.

[@CortesArts]

Thanks so much! Let me know if you have any questions or requests 😊

[@AlexandreAndriesse]

We've gone so much ahead in this video xD

[@shnaim31]

Learned something. thanks

[@trustedcanvas]

😎 big thanks 👍 dude..

[@shahinservati2651]

that was helpful . thanks.

[@CortesArts]

Happy I could help! If you have any requests for other videos please let me know 🙂

[@KarelProkes]

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!

[@KarelProkes]

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?

[@CortesArts]

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!

[@busyhero]

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?

[@CortesArts]

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!

[@busyhero]

@@CortesArts Thanks so much! That makes sense.

[@afsarux4367]

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

[@miroslavjovanovic9407]

What about with variants of buttons with different tooltip on hover states ?

[@j.parkerbaker9335]

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?

[@CortesArts]

If I understand correctly, in the instance you need to set the base component to fill instead of hug I believe!

[@aymenomar09]

so amazing perfect tuto

[@CortesArts]

Thank you! If you have any requests for other videos please let me know 🙂

[@RoyVergara]

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.

[@adrian.diaconescu]

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!". :)

[@RoyVergara]

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

[@CortesArts]

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!

[@jacquelyn07636]

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

[@CortesArts]

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!

[@jacquelyn07636]

@@CortesArts awesome. Thank you!! My Figma was being super buggy yesterday. Your videos are super helpful! Thank you! I’m def a subscriber now!

[@leandrodener6174]

Making the button hug the content (text) don't make us loose consistency as each text will make buttons have lots of different widths?

[@CortesArts]

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!

[@leandrodener6174]

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

[@desmonwilliamsitorus6817]

Thx man..god bless you

[@CortesArts]

You're welcome, glad it was helpful!

[@oussamasethoum1665]

Bro, you latterly cut the part where you made the Button a component at 8:08.

[@danielDefoe81]

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)

[@CortesArts]

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!

[@mikepetro4737]

How would we extend this to swap an icon for another icon in our library?

[@CortesArts]

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 😊

[@tara730]

can we move icon to left if we have icon in right in master component?

[@ArupFilms]

so much to learn

[@philipebuka8767]

You're just too good

[@Bert_FPS]

In the beginning you should how if you click the icon you can change it but didn't go over that in the video...I am wondering how to do that

[@CortesArts]

Hi! So if you make an Icon component with variants (how we did with the button variants), it will work in that same way and you'll be able to change out any of the icons you make 👍🏼

[@mohamedatalla7849]

Pls clarify my doubt sir does it have tabla soft????? Pls tell sir

[@samanehjafari_]

Perfect!