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

hey everyone dennis cortez here i'm a designer who codes teaches and makes music in today's video i'm going to be going over how i work with variants and auto layout to make really powerful action slash buttons in figma [Laughter] [Music] so i've made a couple videos on the basics of auto layout and how i create variants within them but there's been a lot of progress from figma's and on how auto layout actually works and a lot of the variant group items that you can work with i think there's a lot of powerful updates that i wanted to highlight in terms of how i use it on my day-to-day work and how i build design systems around this new functionality just a quick plug i do have a patreon so if you're interested in getting these videos early i post them there a couple days early typically and i also post behind the scenes of these videos and i post extra projects that i'm working on outside of youtube so if you want to stay up to date on those feel free to check it out at patreon.comcm or you can follow me on instagram and twitter both of them are at shy boy tm i also make music so check those out there's a link in the description as well if you're interested so first off what are variants variant and variant groups are a feature that figma introduced just a bit ago that in my opinion is a way to simplify design system assets and adding ways to add parameters to each of those so that you can swap things out without having to make different instances for each one instead you can just have one powerful component and if you do it right you're actually able to make your workflow for you and your team so much easier if you do this the right way and secondly what is auto layout i'm going to read the description straight from figma so they say that auto layout is a property you can add to frames and components it lets you create designs that grow to fill or shrink it and reflow as their content changes this is great when you need to add new layers accommodate longer text strings or maintain alignment as your designs evolve so in my opinion auto layout is super powerful and i use it on almost everything when it comes to product design speed and optimizing your workflows is super important so at scale auto layout is one of the main foundations of design systems that will really help you get to that level so what we're going to do in this video is i'm actually going to show you an example of what i've made at work and then i'm going to actually build something similar with you all so that you all can build it yourself and you can follow along and hope that it will be helpful for you so that you can see how i actually go about doing this so this is the button that i made for the mothership design system when i was working there and this button actually has a lot of parameters as you can see over here on the right we have four here that we can look at we have size type icon left and icon right and as you can see there's actually ways to do both drop downs and toggles so this is helpful for when you have certain parameters that only need to be on or off and then versus something that needs a drop down because it has multiple selections so for the size for example this one button can actually do a lot of changes in terms of this you can change the size you can change the type you can do all that you can even add icons if you need to and then i could go in here and actually change out these icons for something else if i wanted and then having my color system set up i can change those out so what's cool about this when you're using auto layout is as you saw with the icon it actually fills the space based on what the contents are and that works for the button text as well so for this one because it's a destructive button let's say we want to cancel order so we can actually type out cancel order in here and it resizes based on the text that we put in there so as you can see at scale when you're actually building buttons out like this you get to use them in so many different ways and it's very scalable as in terms of you only have to maintain this one component so if we take a look at how the actual variant groups work so we have this main action one here that has all of the different variations that you can have within the system that we developed and what our needs were for our specific product so obviously that'll be different for you but we're going to go ahead and try and build something similar to this so i'm going to go ahead and open a new document and let's go ahead and get started so the way that you're going to start off with this is we're going to make the button first so you just need text we're going to go ahead and make the text say button so for this example i'm going to use 16 for the size of the button so i can go ahead and change this out here let's use a different typeface so you can go ahead and use whichever one is fit to your brand but i'm going to go ahead and use this one just for practice and then i'm going to change this button to white because we're going to have a darker background here so i'm going to go ahead and add auto layout at this point so because this is in a frame you're not seeing the auto layout on the right but if you were to put this within a frame you would see that auto layout option up here here but just a quick tip is actually if you have text and you just hit shift a you can create auto layout based on that so now this already gives me the option here i like to use 12 for my spacing between items but it's up to you what you want to use so for now let's go ahead and add a fill for the background so that we can actually see it so i'm going to go ahead and use this this default blue from figma so going over some of the auto layout functionality you actually see here this is the spacing between your items this is the padding around your items and then you can go ahead and customize each of the alignment and padding in this menu here so one thing to point out is this last one so you can do space between it's not super helpful for buttons because we want hug contents for a lot of the a lot of the use cases that we're using but just a heads up that there is space between which in web development terms is basically like justify the space between so that they're at the ends versus packed together so for this example we're going to go ahead and use pact so for the padding i'm going to go ahead and change this and i'm going to use 16 on top then i can just tab through each of these and just go to the next one so i don't have to use my mouse to click on each one and i'm going to do that it's also worth mentioning that you can change the entire padding for an auto layout frame on this selection here so if i type 16 in here it'll set everything to 16 but because this is a button you typically want the top and bottom padding to be less than the sides so we're going to go ahead and use what i put on before and let's go ahead and add some border radius just so we can get some styling in here i'm going to go ahead and just use four for my example you can go ahead and use whatever is great for your brand and then i'm going to set this line height to 20. i like to use that for 16. and then let's go ahead and rename this to button so i just did command r there on mac so i can go ahead and just rename it real quick and then i have my button here so now i'm going to go ahead and add an icon to this before we get started with making variants so i just grabbed this from another file but feel free to either make your own or grab one from a website resource that you have and i'm going to go ahead and resize this to let's do 16 so that we're matching this and then if you click on the top frame of this button so what we were working with before you can go ahead and see the alignment here so that's where this comes into play as you can see this arrow is actually not aligned vertically with the text and that's because of this selection here so we're going to go ahead and actually change this to centered aligned and after that we have it centered horizontally so we can go ahead from there so i recommend adding an icon on both the right and the left one for labeling and one for an action item that you're working on so but for my example i'm just gonna use one on the right just to keep it simple you're gonna go ahead and make what i like to call your base component so this is important because if you actually go straight into making variants of this then when you want to make updates to each one you're going to have to go through one by one and make each of the updates whereas if you actually include this step then you only have to edit one of them i'm just going to make two copies for this one just for example sake so go ahead and duplicate this one twice and then now we have two separate variants that we can use for this and we're gonna keep this one separate we're gonna go ahead and select each of those duplicates that we just made and make them each their own component we'll go ahead and make multiple components and then you're going to see this option here on the right that comes when you select two different base components so we're going to combine these as variants quick tip here is right when you make your variant group i suggest adding auto layout so i just did that by doing shift a and what this does is it helps you move things around so that you're not having to organize them constantly because the base one actually doesn't add auto layout so for your variant groups you have to manually move things around so just a quick tip there so now that we've done this i'm going to start adding data to the variant groups so that we can start sectioning them out and having them for drop downs for data that we can add to them so for the first example i want to go ahead and make both a primary button and a secondary button so let's go ahead and leave the blue for our primary button but the secondary one we're going to go ahead and change out the background color and let's do like a dark gray so now that we have that and we select the variant group you can actually see that we have a default property that's added to it but what we want to do for this button is actually go ahead and start sectioning so the first one that i like to do is called type that's how i reference it and type basically references whether it's a primary or secondary button or if you have a tertiary destructive etc so we're going to go ahead and just add the types here so let's do primary and then this one will actually have a different one so you can go ahead and select each of them and actually add the new addition within this input field so when i go ahead and i type it in here it automatically adds it as a second type to here so let's make a third one now so that we can have a destructive button as well so i'm gonna go ahead and select anywhere on this variant and then i'm gonna press this plus button in the bottom right and this will duplicate the top level component that you made and then we have a new type here so it actually lets you input on the type immediately and we're going to call this one destructive like i said earlier so this one we're going to change the color because we want it to be more of a warning one so we're going to go with the red that figma gives us so now that we have that we want to add these different variations for whether or not we want an icon so the way that we do that is we're actually going to select each of these and this is how i like to do this where i just do command d and it just basically makes duplicates of each one of those and now i have two of each one and for each of these we want to add whether the button is going to have an icon or not so this is where the toggles come into play so the way that you can make a toggle is you actually add a new property so you select the variant group you go over here you press add new property and we're going to do icon right so for this like i said earlier i recommend doing icon left and then you would just name the other one icon left of course and then the default we're actually going to change it to on so a quick tip here is if you want a toggle ui for each of these you got to make sure you only have two values and i believe the ones that you're allowed to use is on and off or yes and no so if you add those as the parameters it actually automatically creates a toggle for you within the ui of figma which is nice so we have the default one is on so we're going to make the variance of each one where it's off so basically what i'm going to do is select each one of these second ones so the duplicates that we just made and then i'm actually going to delete each of these which won't actually delete them it will just hide them and then it actually hugs the contents based on this component that we made at first so now we have different variations for that and we're going to change the values for these so the default value as you saw that we made is icon right is on so for these we're going to go here and do icon right is off so as you can see we have the on and off now and we have these extra types here so the way to get rid of the extra types is you just select those duplicates that we had and we're actually going to set them to the default ones that we use so this one's primary this one here would be secondary and then this third one would be destructive and then as you can see that automatically will just remove whichever ones you're not using so now that we've done that we can actually drag in this button component just to show you all how it looks actually in practice so now we just have this drop down really easy to use and then we can turn the icon on or off so let's actually expand this a little bit more and add a disabled state so the way that this works is going to be very similar to what we did with the icons i'm just going to select each of these within here and you're going to do command d to duplicate them and now you have all these separate ones that you need to make but the cool thing about these is i can actually just set these to disabled and then add the parameter later so the way that i set them to disabled is i actually do 50 opacity when i'm working with them so that's an easy way to just have a way to actually code this pretty easily and implement the disabled styling and it's uh and it's scalable because you're actually just using opacity versus trying to figure out actual hex codes so i'm going to go ahead and select each of these duplicates that i made and just set the opacity to 50 and the way i'm doing that is just by pressing the 5 on your keyboard and that will automatically set opacity to 50. so now we have each of these as a disabled state as well so now that we've done that we're actually going to go ahead and add that variant property here so i'm going to do add property and then we're going to do disabled and then the same way we did with the icon in this case i'll show you the yes and no example just because it's a bit more contextual for disabled buttons so we're going to do disabled as yes and the default for those would be the ones that are actually disabled there's actually a warning telling you that some of the variant properties are actually matching which is really cool because then you make sure that you don't have like overlap of the same component because then you'll run into a lot of issues there but once we go ahead and add the no to disabled you'll see that goes away because now we actually don't have any overlap there but we have overlapped for each of these the ones that aren't disabled so i'm going to go ahead and select the ones that aren't disabled and in the drop down i'm just going to say no so now once we go to this actual component here you can actually do disabled as well so we can go ahead and swap out to secondary go ahead and disable that or enable it if we want and then now you already have just one button that already has so much functionality and you can get really complex with these like a lot of different variants that i've done especially with like custom components there's ways that you can hide certain elements of a complex component or you can collapse different states and if you're using that in combination with auto layout then it will automatically collapse to the container that you have and the contents within it so now with this we're left with a really powerful button that you can go ahead and actually expand on this more so depending on the product that you're working on and the goals of that product you can actually add a lot more as well so like the example i showed at the beginning we actually had icons on both the left and right and we actually had different sizes for each too so if you wanted you can actually make a different size do the same thing and actually have that be like a base component and then you can add those to this button varying group and then you can have the parameter of like a small and a large or whatever different sizes you need and then you can use those and then just easily with the drop down you just have the button asset that you drop in then you can go ahead and drop down to the size that you need and any of the other parameters that you want to do so i hope this video was helpful and let you kind of see what you can do with variant groups and auto layout and i encourage you to experiment with it try out things on your own try out some different things that are specific to your product and try and implement this within your design system because as you can see it can be really powerful and really helpful for speeding up your workflow when you're working with teams and with design systems if you have any questions or there's anything that i may have missed in this video be sure to leave it in the comments below so that we can go ahead and kind of learn from that maybe you have some tips for auto layout and variants that i may have missed or your team just does it differently than this then i'd love to know and maybe you can share with everybody so that we can go ahead and learn from each other in that way as well lastly be sure to subscribe to this video i can see in the analytics a lot of people are watching the videos but aren't subscribing which i totally get i do that as well but i would really appreciate it if you did it helps the channel out a lot and helps me grow and kind of support me to make more videos for you all so i appreciate all the support and thanks so much for watching this video hope you enjoy it and i will see you all in the next one bye [Music]

Channel: Dennis Cortes

Views: 7,047

Keywords: setup, tutorial, process, beginner, advanced, export, assets, figma, images, user interface, ui, ux, icons, iconography, product design, design, graphic design, app, apps, developer, how to, tips, tricks, mockup, figma tutorial, design systems, design system tutorial, how to make a button, how to design a button, figma button, design button, design action, components, auto layout, variants, variant group, variant tutorial, variants figma, auto layout tutorial, design systems advanced, ux design

Id: ODOR5EniJNg

Length: 17min 13sec (1033 seconds)

Published: Thu Sep 30 2021