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

[@sherrimoss20]

Thanks!

[@CortesArts]

Too kind, thank you so much!

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

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

[@Dachinzzz]

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

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

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

[@mirwayss]

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

[@emmaarizzi55]

Best soft soft Introduction Ever!!

[@CortesArts]

Yay, thank you!

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

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

[@Gobbatman]

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

[@CortesArts]

Thanks so much! Glad it was helpful 🙂

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

[@kyiphyukhin7562]

Thank you. This is the best video ever

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

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

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

[@asafros12]

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

[@narengaurav4818]

best tutorial i've seen so far.

[@CortesArts]

Thanks so much!

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

[@isagive]

Very cool Dennis, thank for this great tutorial 🙏

[@AbdussalamPopoola]

Perfect explanation Dennis

[@alexisarnold2531]

This was great, thank you so much. Subscribed!

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

[@gabypino407]

Thanks for this video! very usefull tips

[@Sharonexplores]

amazing tutorial..thanks alot....

[@mrq_design]

Dude, this is amazing!

[@CortesArts]

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

[@abhinavkashyap5791]

Absolutely Fantastic. Thank you for making this video.

[@ashanniroshana99]

This was really helpful, Thanks Dennis ❤

[@CortesArts]

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

[@rjcreations3801]

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

[@CortesArts]

Glad it was helpful!

[@babiiotpus]

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

[@jayreambonanza1991]

This is very helpful! Thank you

[@bus2895]

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

[@mikezou9929]

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

[@m4celo]

Great job man! Great video!

[@CortesArts]

Thanks so much! Glad it was helpful 😄

[@monlifes]

So cool, thanks!

[@priyankabhimte3396]

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

[@CortesArts]

Thanks so much, enjoy!

[@scottdamien8395]

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

[@CortesArts]

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

[@JarlHelin]

Very clear, bravo!

[@danielgoldberg4235]

great guide!

[@pankajmanjrekar]

Very well explained.. Thanks :)

[@elizabethantai3408]

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

[@CortesArts]

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

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

[@sofyanridwan22]

Awesome Bro , Thanks Tips & Tricks Variant Component 🔥

[@CortesArts]

Anytime! Glad it was helpful :)

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

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

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

[@amjadwithj]

Thanks man!

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

[@livelovelaughlll2936]

thanks for the tip, you are amazing

[@nanimattt]

amazing, you explained it so well

[@CortesArts]

Glad it was helpful!

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

[@stibej]

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

[@CortesArts]

Awesome! Happy I could help 🙌🏼

[@j.k24]

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

[@CortesArts]

Appreciate it, glad I could help!

[@shnaim31]

Learned something. thanks

[@ataulhayeekamran5160]

thanks, awesome information

[@CortesArts]

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

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

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

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

[@trustedcanvas]

😎 big thanks 👍 dude..

[@Jsosa787]

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

[@yeminhtun2543]

Ayy Designer + Music Producer.. cheers brooo

[@CortesArts]

Both of my life passions 😎 thank you!

[@yeminhtun2543]

Same here bro 😎

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

[@shahinservati2651]

that was helpful . thanks.

[@CortesArts]

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

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

[@aymenomar09]

so amazing perfect tuto

[@CortesArts]

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

[@schnoonglaandiageckeler187]

I subscribed my dude, Thankyou.

[@CortesArts]

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

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

[@desmonwilliamsitorus6817]

Thx man..god bless you

[@CortesArts]

You're welcome, glad it was helpful!

[@ArupFilms]

so much to learn

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

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

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

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

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

[@shaqayeqsharif7500]

it was wonderful

[@CortesArts]

Glad you found it helpful!

[@georgesketch]

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

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

[@samanehjafari_]

Perfect!

[@philipebuka8767]

You're just too good

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

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

[@AlexandreAndriesse]

We've gone so much ahead in this video xD

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

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

[@miroslavjovanovic9407]

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

[@kvaibz1147]

what a gem

[@CortesArts]

Thanks so much!!

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

[@tara730]

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

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

[@mohamedatalla7849]

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

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

[@Z3ROR]

True or false is also allowed to have that boolean toggle.

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

[@bnarajput8015]

Can I resize these buttons while using it in my design?

[@CortesArts]

Yes!

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

[@oussamasethoum1665]

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

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

[@jorgeimo]

Drinking game: Take a shot every time he says "go ahead" 😂 But seriously tho, thanks for the tutorial, man! Super helpful.

[@CortesArts]

Haha bad habit, I have a “phrase” I repeat each video it seems 🙃 thank you!

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

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