How to create an Auto Layout button in Figma

hey everyone will from will brett design here i've just started this new channel and i wanted to share with you some tips and tricks as i go through working with sigma today the first video that i'm creating is a auto layout button that's how to create buttons and button components within figma and to build out your design system using this technique so what we're going to do is first we're going to create a text label so i've just held down t on my keyboard and then clicked in the screen to create a label and i'm going to call it button so over here on the right we've got our text controls and we can choose our font our weight and our font size here and also our line height and some other options here too so i'm going to set this to text align center and i'm going to leave everything else because these are the settings i actually quite like so let's have a look at this button so what we need to do now is add it to a frame or frame this button and we can do that by right clicking and going add auto layout or as you can see here we can just do shift and a so i've done that and now we have this frame so there's a frame around the button and we can see over here on the auto layout panel that we've got 10 pixels spacing between the items and we've also got 10 pixels of padding and it's aligned to the top left so i'm going to stick with those settings because they work for me in this example and i'm now going to give the frame a background color so down here if we add a fill and choose a nice color i'm going to go with this red so now we've got a nice background color and we've got our text label i don't think that black stands out very well on the red so i'm just going to change this to white there we go that's much nicer let's have a look at making these and these corners less sharp let's round them off a bit by four pixels using this up here on a radius tool so there we go we've now got a nice button with four pixel radius and our text and because it's in an auto layout frame it will actually grow with the button nicely so there we go so let's just go back to the button so that works really nicely what can we do next well to be able to use this throughout our documents um we need to create a component so if we click on the frame itself give it a name let's call it button we can now create a component using this item up here or the keyboard shortcut showing that so now we've got this button if we look at our assets folder we've now got this new component which is button which is what we've created here let's just drag that in so this is an instance of this component so if i was to update the master component here let's say let's change this color to something like that you can see it will also change all instances of that button okay that's really nice but how can we expand upon this and make this even better well we have variations of buttons so we have a primary secondary and tertiary button so let's create those now so i'm just going to hold down alt and create a couple of in fact i'm not going to do that i'm going to undo everything i've done okay and this is no longer a component so we're back to before we created it as a component so i'm going to now create a few variations of this by holding down alt and dragging here we go we've got three buttons and let's name them so over to our layers panel so i'm going to do forward slash primary forward slash secondary and forward slash tertiary there we go so we've now made that button and we've added this forward slash which will become more apparent later so let's now style our buttons so the secondary i don't want it to have a fill i want it to have a stroke instead and i'm going to keep it as one pixel and add the same color i'm also going to change the font color to that red okay so that's our secondary button and for our tertiary i'm also going to change the font color to red but i'm going to get rid of this fill entirely and now it's just that text so what can we do we can create multiple components here so if we go back up to our component thing we now have this little drop down because we've got multiple selected clicking that you can click create multiple components like that so now we've got multiple components and back to our assets now we can see all those components in here let's just drag them in quickly there we go and like before if we were to change any of the settings it would change them let's pick something that actually shows up it would actually change them globally like that okay so i'm going to undo that again and show you one more thing now we've got our components here we can actually clean up this in our design system a bit by combining its variants because these are all technically the same component just different variants of that component we should be combining them into one component under variance so here we go let's click this button on the right there we go now we can see these have been highlighted for this border and if we look at our assets panel we can now see we actually only have one component so where have the other two gone well if we drag that button in you can now have a look we've got this new property one under here we've got primary secondary tertiary so that's a really nice way of creating a button that is scalable and we can control it from a master component over here and we can also have different variants of that component and that's a really really nice way of working with ui and this will save you a lot of time when you're working on your screens so i hope you really like that video please like and subscribe and leave a comment below with any feedback i'll be creating more videos as we go so yeah make sure you subscribe and i'll see you in the next video thanks for watching

Channel: Will Brett Design

Views: 182

Keywords: auto layout button figma, figma, figma tutorial, auto layout, figma auto layout, how to make a button in figma, components, figma components, figma symbols, user interface, will brett design, will brett-atkin, design system, figma design system, figma autolayout, tutorial figma, auto layout tutorial, figma auto layout tutorial, figma button, auto layout figma button, figma constraints and auto layout, figma button component, figma button states, Design system figma 2021, ui

Id: 1RtujiVXXTE

Length: 6min 49sec (409 seconds)

Published: Tue Oct 26 2021