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

Подписаться 12 тыс.

Просмотров 199 тыс.

50% 1

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

Опубликовано:

29 сен 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 236

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

@abhinavkashyap5791 Год назад

Absolutely Fantastic. Thank you for making this video.

@pomekon 2 года назад

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 2 года назад

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

@servalpunk7411 2 года назад

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

@mirwayss 2 года назад

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

@isagive Год назад

Very cool Dennis, thank for this great tutorial 🙏

@alexisarnold2531 Год назад

This was great, thank you so much. Subscribed!

Год назад

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

@Dachinzzz Год назад

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

@asafros12 2 года назад

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

@mikezou9929 2 года назад

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

@monlifes Год назад

So cool, thanks!

@valbalano5811 2 года назад

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

@CortesArts 2 года назад

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

@Gobbatman 2 года назад

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

@CortesArts 2 года назад

Thanks so much! Glad it was helpful 🙂

@nbulwinkel 2 года назад

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!

@zoeyennguyen8969 2 года назад

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

@CortesArts 2 года назад

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

@jayreambonanza1991 2 года назад

This is very helpful! Thank you

@danielgoldberg4235 2 года назад

great guide!

@roanacedev 2 года назад

This is awesome! and Great content at all

@CortesArts 2 года назад

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

@amgaddiiab2901 Год назад

Thanks man!

@pankajmanjrekar 2 года назад

Very well explained.. Thanks :)

@AbdussalamPopoola Год назад

Perfect explanation Dennis

@JarlHelin 2 года назад

Very clear, bravo!

@kyiphyukhin7562 2 года назад

Thank you. This is the best video ever

@gabypino407 Год назад

Thanks for this video! very usefull tips

@shnaim31 Год назад

Learned something. thanks

@livelovelaughlll2936 Год назад

thanks for the tip, you are amazing

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

@bus2895 Год назад

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

@priyankabhimte3396 Год назад

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

@CortesArts Год назад

Thanks so much, enjoy!

@emmaarizzi55 Год назад

Best soft soft Introduction Ever!!

@CortesArts Год назад

Yay, thank you!

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

@scottdamien8395 2 года назад

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

@CortesArts 2 года назад

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

@samanehjafari_ 2 года назад

Perfect!

@ashanniroshana99 2 года назад

This was really helpful, Thanks Dennis ❤

@CortesArts 2 года назад

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

@j.k24 Год назад

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

@CortesArts Год назад

Appreciate it, glad I could help!

@osamahaashir6145 2 года назад

THIS IS REALLY REALLY HELPFFUL VIDEO

@CortesArts 2 года назад

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

@JaspervanderKamp 2 года назад

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

@CortesArts 2 года назад

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

@babiiotpus Год назад

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

@marv_reginald 2 года назад

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!

@Sharonexplores 2 года назад

amazing tutorial..thanks alot....

@shahabuddinahmedohi8788 2 года назад

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

@CortesArts 2 года назад

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

@ArupFilms Год назад

so much to learn

@manjushapawar8608 2 года назад

This was really helpful, thanks a lot :)

@CortesArts 2 года назад

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

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

@trustedcanvas Год назад

😎 big thanks 👍 dude..

@sofyanridwan3033 2 года назад

Awesome Bro , Thanks Tips & Tricks Variant Component 🔥

@CortesArts 2 года назад

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

@m4celo 2 года назад

Great job man! Great video!

@CortesArts 2 года назад

Thanks so much! Glad it was helpful 😄

@kunalhindocha 2 года назад

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.

@elizabethantai3408 2 года назад

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

@CortesArts 2 года назад

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

@stibej 2 года назад

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

@CortesArts 2 года назад

Awesome! Happy I could help 🙌🏼

@mrq_design 2 года назад

Dude, this is amazing!

@CortesArts 2 года назад

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

@victoremisho9432 2 года назад

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 2 года назад

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

@ataulhayeekamran5160 2 года назад

thanks, awesome information

@CortesArts 2 года назад

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

@nanimattt 2 года назад

amazing, you explained it so well

@CortesArts 2 года назад

Glad it was helpful!

@narengaurav4818 2 года назад

best tutorial i've seen so far.

@CortesArts 2 года назад

Thanks so much!

@shahinservati2651 2 года назад

that was helpful . thanks.

@CortesArts 2 года назад

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

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

@IrfanAli-ts7dd 2 года назад

Very helpful. thanks for the video

@CortesArts 2 года назад

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

@Underhills 2 года назад

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 2 года назад

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

@Underhills 2 года назад

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

@Jsosa787 Год назад

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

@merisimamovic965 2 года назад

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 2 года назад

Also with on and off

@CortesArts 2 года назад

Happy you found it helpful, thank you!

@desmonwilliamsitorus6817 2 года назад

Thx man..god bless you

@CortesArts 2 года назад

You're welcome, glad it was helpful!

@sherrimoss20 Год назад

Thanks!

@CortesArts Год назад

Too kind, thank you so much!

@shaqayeqsharif7500 2 года назад

it was wonderful

@CortesArts 2 года назад

Glad you found it helpful!

@philipebuka8767 2 года назад

You're just too good

@schnoonglaandiageckeler187 2 года назад

I subscribed my dude, Thankyou.

@CortesArts 2 года назад

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

@aymenomar09 2 года назад

so amazing perfect tuto

@CortesArts 2 года назад

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

@patrickojeh 2 года назад

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

@CortesArts 2 года назад

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

@maihuynh7776 2 года назад

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

@georgesketch Год назад

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

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

@afsarux4367 2 года назад

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

@yeminhtun2543 2 года назад

Ayy Designer + Music Producer.. cheers brooo

@CortesArts 2 года назад

Both of my life passions 😎 thank you!

@yeminhtun2543 2 года назад

Same here bro 😎

@kvaibz1147 2 года назад

what a gem

@CortesArts 2 года назад

Thanks so much!!

@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

@AlexandreAndriesse 2 года назад

We've gone so much ahead in this video xD

@varshakapil8224 Год назад

Great

@CortesArts Год назад

Thank you!

@tara730 2 года назад

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

@danielDefoe81 2 года назад

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 2 года назад

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!

@hangluong5668 2 года назад

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 2 года назад

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

@miroslavjovanovic9407 2 года назад

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

@j.parkerbaker9335 2 года назад

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 2 года назад

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

@sweetlaizabalbuena2269 Год назад

I get it

@MrEdukada Год назад

👏👏👏

@user-rk2ni5md5n 2 года назад

спасибоооо!

@patrickrushton 2 года назад

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 2 года назад

Figured it out. Shift + Return

@KarelProkes 2 года назад

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 2 года назад

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 2 года назад

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!

@princeisaac5177 2 года назад

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 2 года назад

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 2 года назад

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

@mohamedatalla7849 Год назад

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

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

@Adelinawrites 2 года назад

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?

@plokkum 2 года назад

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?

@Adelinawrites 2 года назад

@@plokkum this happened on Professional for me though

@CortesArts 2 года назад

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!

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

@tamtamngo6533 2 года назад

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 2 года назад

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

@RoyVergara 2 года назад

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 2 года назад

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 2 года назад

@@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 2 года назад

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!

@Z3ROR Год назад

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

@playbak 2 года назад

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.

@CortesArts 2 года назад

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 👍

@playbak 2 года назад

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

@busyhero 2 года назад

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 2 года назад

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 2 года назад

@@CortesArts Thanks so much! That makes sense.

@Dr.smileclinic 2 года назад

Wow..

@CortesArts 2 года назад

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

@mikepetro4737 2 года назад

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

@CortesArts 2 года назад

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 😊