How to design buttons in Figma // Use variants and booleans for multiple states

[Applause] [Music] what is up everyone welcome to 90 degrees a channel about elevating your creative career my name is alberto turcini and if you haven't done so already you know what to do please consider subscribing [Music] have you had your coffee yet because today we're gonna be talking about buttons and i know it's a little teeny tincy tiny subject uh but a lot of people don't know the power of figma and how you can use variants to create extremely powerful buttons that you can switch states and you can change properties to your advantage so without further ado let's jump right in alright so i'm here in figma and i've created this sample document and nothing in it yet so i'm going to get started on creating my buttons and the first thing that i'm going to do is i'm going to press t on my keyboard to type my label so i'm just going to say label and i'm going to adjust it so right now i have it set to center uh this has auto width and i wanted to vertically align in the middle my baseline shift to be in the middle because this is going to be a button so it's going to be surrounded or encompassed by a container so in order to create that container i'm actually going to use auto layout so on my keyboard i'm going to press shift a and you're going to see that it created now a frame around my label you can also see here on the left side panel that now i have the auto layout icon identifying it as such i'm going to rename that so command r on my keyboard i'm gonna rename that to button because today is a fantastic day where we're actually gonna be renaming our layers let's do this guys so uh i've renamed it to button i want to be able to alter the styling on this so the first thing that i'm going to do is i'm going to add a field to this container that feel is going to be i already had some colors here so i'm just going to select this sort of royal blue electric blue i guess electric blue and i know my colors and i'm going to change the label to white so that you can actually read it okay so now that i have that i'm also going to have some sort of uh corner radius to 10 i'm liking how that's looking and i'm gonna make some adjustments here because of how i want this label to behave and sort of dictate what the button is going to behave like when i type something longer than label etc so i'm going to open this up and this is going to be my alignment and padding window in here i'm going to make sure that i'm selecting the center and this is really just how the container itself is treating the objects within it and i'm gonna change the padding just to something that i'm a little bit more comfortable with and that falls into my typical eight point grid with four point variants so i'm going to say that at the top i'm going to have 12 and on the sides i'm going to top and bottom is going to be 12. the sides is going to be a nice 16 for me and i think that's nice and comfortable it's a snug button i wouldn't necessarily uh call this my main button but it's kind of like a small button that i'm going to be using throughout my ui now that we have that this is a frame with auto layout i want to convert that to a component or a symbol if you're coming from sketch and the way i do that is on my keyboard i'm going to press command option k and you see how the label on that it's not only showing me the auto layout uh but the the little icon here represented is that this is now a component it's my component button and i have uh metadata that i can add here to the right which i'm not going to do that right now however i know that a button is going to have several states i'm going to have my primary button i'm going to have secondary buttons i may have hover states i may have focus states there's a bunch of things that we can do here by using variants so let's try that out real quick with the button selected i'm going to go over here to variants and i'm going to hit on this plus icon you'll see that it's going to create this sort of element around it and now this is called variant number two the first one automatically changed to default so this property number one which right now is called property number one i'm going to call it icon and just leave it at that for now i'm going to add a new text element into here so i'm going to press t on my keyboard i'm going to type search right and that's going to be our example right now this is set to roboto medium i'm going to change this in this case i'm using uh i'm using font awesome to draw my icons but you can really you can it doesn't have to be text you can you can use an icon that you have an svg a png anything that you want to use really but in this case i'm going to go with that so i'm going to go with font awesome and not brands but i'm going to select pro and now i have this nice little magnifying glass icon i'm going to change that to white as well because that's the color of my label and i'm going to go ahead and drop that in now i want to change several properties from this because i think the label is a little bit too far away from the icon so i can click on that and i can actually set the auto layout spacing between items to eight again i'm trying to stick within my eight point grid so right off the bat i have um a version of this as a default and i have a version of that with icon kind of want to change that a little bit and you'll see why in a second but the property one i'm gonna change that to with icon first of all let's let's let's see what it looks like right now so if i come here to this other thing and i drop it in the ui right i go over here instead of layers i switch to assets i see my components so this is the button that we've just created i drop it in i can see that right now this doesn't make any sense because it says with icon so right now it's set to default and if i switch it to icon it switches to that now that works that's functional you know we can we can leave it at that however one of the things that figma introduced which i'm super excited about especially for situations like this is the ability to use booleans and uh with the ability to to use booleans we're gonna see that in practice in just one second so i'm gonna come here right and i'm gonna select the overall uh encompassing area with with my components so my variant instead of being called um you know i'm gonna call it with icon but instead of being default and icon i'm gonna say that the default which is my button at the top is false meaning that it has no uh no icon and the one that is called icon i'm gonna call that true and what's gonna happen now it's gonna be very special i'm gonna be able to in the same button uh you'll see that now it has this switch icon to the right where i can say no icon or with icon so i know now that i have my booleans uh set up and i have that switch to add the icon or remove the icon i know that i want to also do secondary and potentially tertiary flavors of these buttons so the way to do that is i'm gonna go here up to the bounding box around my buttons and under variants i have this little three dot icons with more options i'm gonna go in there and i'm gonna go ahead and add a new property not a new variant because that's only going to duplicate you know my my primary or default so i'm going to add a new property and i'm going to say that this is called hierarchy and hierarchy is going to establish that these that i have selected at the moment they're going to be my primary right and now i'm going to go ahead and duplicate you see that this is now with icon is set to false hierarchy primary with icons set to true hierarchy primary i'm gonna duplicate both of these by selecting them so i click on one press shift on my key or hold shift on my keyboard click on the other one i'm gonna hit command d to duplicate them obviously now it has this property as mixed which we know because we have one with icon and one without but in terms of hierarchy we're going to set both of these to secondary which is very cool we we have them we have them changed so now what i'm going to do is i'm going to change the overall styling of these to be kind of like my secondary button so first of all i'm going to change the label to that electric blue color i'm going to change the background fill of that to kind of like a lighter color and that's going to be the style of my secondary my secondary buttons i'm going to do the same to the one with icon literally exactly the same as what i'm doing as what i did in the other one just to make sure that we have that so now again if i go to my ui i'm not only able to switch with icon or without icon but i'm able to duplicate this and i can say this is search and that behaves as expected and this one i don't want any icon on it and i want to switch it to secondary and i wanted to say cancel oops and there we go this is how you can quickly create buttons that have different properties and options that you can turn on and off and switch between hierarchy switch between states and it all happened in a matter of minutes and this is the power of using variants and booleans within figma if you like this video please give me a like make sure you leave a comment below have you been using this or do you plan to use this in your design and again thank you so much for watching and i'll catch you on the next video you

Channel: Alberto Orsini

Views: 71,397

Keywords: figma, ui design, ux design, figma boolean, figma variants, figma variants tutorial, figma tutorial, figma design, figma ui design

Id: 9k4KYcHfEic

Length: 11min 4sec (664 seconds)

Published: Thu Jan 28 2021