Figma Auto Layout | Getting Started with Auto Layout

have you heard of auto layout the game changing thing that is figma auto layout well in today's episode i'm gonna tell you everything you need to know about auto layout inside of figma what is it how do you use it what are all the different options we're gonna build some really simple things like buttons that expand as you type into them but we're gonna go like four steps deeper and nest auto layouts inside of auto layout to create complex layouts that just blow your mind let's do it [Music] [Applause] all right we're in figma we have a starting file open if you want the starting file consider becoming a member either one of my supporters or my insiders in it is just uh some assets some cryptocurrency icons some information and a watch list i have been trading cryptocurrency recently using an app called coinbase and these table cells are a great example of how we can use auto layout you see we can actually shrink my browser and things actually move and kind of shift and change so uh this is what we're going to be recreating a little bit of this table row cell action that's here let's get started shall we let's do the most basic thing you can do with auto layout and that is to create a button the first thing you need to know about auto layout is that all auto layouts are frames frames are how we should start building everything turning things elements assets into frames so no more drawing rectangles and putting text in it and throwing it in a group don't think like that anymore start thinking like elements loose out there in the wild on their own and then turning auto layout on and it becoming a frame and now you can design with that frames frames are powerful inside of figma so you make sure that you're designing with frames frames are not just for artboards frames are for everything and so we have this element out here it's just a text element that says trade we're going to create this nice big blue button just like it is in coinbase so to do that all we have to do is press shift a and we have created a frame but more importantly we've created an auto layout you can tell by the little icon over in our layers panel that it's not only a frame because it says it there but it has the icon of an auto layout what does that mean well that means we've done something very special we've turned on all of the settings over here in the inspector panel for auto layout inside we still have that text element but now all of a sudden our frame is there we have some padding around it you'll notice that when we click on the actual text element it tells us inside the inspector panel that auto layout alignment is on and now it's controlled from the parent frame all right so there's a child parent relationship here the parent being the frame itself so if we really want to control have fun and control auto layout we want to do it for the most part from the parent frame now here's what's really cool because it's a frame we can style it so we can put a fill there we're gonna use that nice uh blue background that we have our text is white we can add some border radius to our frame maybe four pixels of border radius and now we have what looks like a button now what's really cool is right out of the box our button is going to expand with the text that's input the reason it's going to do that is because we have some resizing options for our auto layout and it's saying it's going to hug the contents both on the height excuse me the width and the height it's going to hug the contents of what's inside if there's multiple things depending on how wide those items are maybe there's an icon inside it's going to hug all of those things all right what it's also telling us when we click on the master frame or the parent frame is that our auto layout is a horizontal auto layout you can also create vertical direction but ours is horizontal now this doesn't really make sense because we have one element inside of our auto layout but if we command or control c and v and created multiple separate elements inside you can see that it's going to automatically give them 10 pixels of space we can remove that increase that and it's stacking it horizontally or we can do vertically this way now this is a really weird button so we can just delete those elements inside what's really cool about this is later on if you have an icon maybe this square represents our icon and we want to bring it inside our auto layout see if we drag it inside the frame it's going to find a spot to put it horizontally in our frame as we shrink this icon it's going to try to hug the contents inside of it and we can also because it's a layout and auto layout we can shift where this icon would be now if we go so small that it's no longer balanced with the text you'll see this really weird balance issue well let's solve that right now we're going to click on the actual auto layout the frame and you can see like we said we have vertical horizontal space between the elements padding around the outside of the elements and if you want to give it defined padding on different sides not consistent padding and you want to change this balance this alignment here we're going to click on our little alignment and padding icon it brings up this great little chart here that tells us we have even padding around the outside if we want more on the left we can put it on the left with one on the right there's 20 pixels now on the left and right we also get this great little chart here that's telling us how things are aligned why don't we align things right now everything's pinned so to speak to the top left we can pin it to the top right the bottom you can see our icon moves when we do that bottom or center let's put it in the center and now our icon is always going to line up with our text that's really great now we also have this option down here which is packed and that means if we try to expand our button it's going to keep everything packed into the center it's going to try to honor that space in those items the space between the items we can also switch this to space between and it's going to shove it to the far ends of our button and now as we kind of expand our button we get like kind of expanding to the left and the right hand edge so we don't want to try to manipulate the items in between as much as manipulate the container and tell everything inside what to do if we get rid of this icon it's going to go ahead and re-lay out everything with that one item we can also come back to our frame and say hug the contents there and there and now we're right back to where we were when we started where we can change the size of our button pretty cool we like where it's at right now why don't we come in and look at that padding one more time why don't we give it 30 pixels and 30 pixels on this button and i'm liking our button quite a bit so why don't we come in and name name it button and let's make it a component just for fun by hitting command ctrl k and now we have our button component let's move our button component out of the way and let's put an instance of this button inside right where we were going to in our other cell now that you've seen how we create a simple button with a simple auto layout and all the options you have there let's create some more complex auto layouts maybe even nesting some of those auto layouts so we know that we have these little icons up here and edit options and we have a heading you can see in coinbase they stay kind of anchored to the left and right hand side we know how to do that let's go ahead and go back over to figma make that happen we're going to take our text and shift a turn that into an auto layout and we're going to take the icons and the word edit and shift a turn that into an auto layout now when we zoom in you can see now we got weird spacing so let's go to alignment and padding and center all of those and i like the 16 pixels in between i think that's pretty good spacing in between those elements now what we wanna do is we're gonna we're gonna grab this frame and the other frame and we're gonna hit shift a and create another auto layout so now we have nested auto layouts totally is gonna work great except right now we're gonna get a little bit of funky behavior right now our elements are trying to hug the content stay inside and that's because we have this packed option selected but why don't we fix that really easily by just selecting space between it's going to mimic kind of css flexbox and now as we change the size of this cell it's going to change and keep everything kind of anchored to the left hand and right hand side let's add some styling here like maybe a white background let's add some padding around maybe 16 pixels of padding around our cell that's looking pretty good and then if we wanted to we could add some border radius but i think this works for us this is pretty good now you can see nice padding everything's staying anchored to the left and right hand side love it now let's build our actual cryptocurrency cell so we can kind of create multiple versions of that you can see that these three are kind of together and then each one of the others uh text elements or text boxes they're their own piece in the auto layout i skipped a little chart but we're going to do our button and then a star over there on the right hand side so why don't we just grab these three shift a auto layout let's change the alignment there and then we'll just do the same with these auto layouts auto layout auto layout auto layout on our star as well everything's looking really really good now i'm going to grab each one of these frames not the master button we want to get that one out of the way let's grab all of the other ones first let's call this the heading so we don't grab that here's all of our other frames we definitely want to name these layers i don't have time today but i'm going to hit shift a auto layout i'm going to center everything and i'm going to do space between and that should work we should be able to grab our frame line it up on the left hand side and start spacing these elements out and it's going to respond beautifully let's do the same thing we did with our heading cell we're going to give it a little bit of a fill and let's do 16 pixels of padding on this one as well now we should be able to turn this one into a component let's call it the cell you could call it row call it whatever you want let's move that up and out of the way and bring a duplicate of it down why don't we just duplicate a bunch of these ones maybe we'll do four or five of them just like that i'm gonna grab all of these cells as well as our heading that we have here and let's go ahead and grab those not the master cell all of these i'm going to hit auto layout one more time look we have all this space in between why don't we remove that space butt everything up against itself and now you're gonna see another one of those funky behaviors i'm gonna try to stretch out the master frame it doesn't work so why don't we come in and give all of these the ability to not be fixed with but fill the container now i'm able to stretch just the container out and everything responds inside it's super duper nice all right we can come into these images and why don't we drop a few of our other images inside and if we want to because these are components we can still come back in and add a little bit of different styling so why don't we add something like some zebra striping i'm just going to change the fill of these ones to be a little bit of an off gray and that is perfect now we're able to change the width of this and we could even if we wanted to uh actually change all of these to fill the container uh not just horizontally but vertical as well so you can see these are going to change size now we didn't do that to our heading so it's going to stay the exact size that we want it to be that's pretty cool if you don't want that behavior we just come back into our individual cells here and say fixed height no problem and now we can just expand our master container out without messing up the actual size of these and what's great is because it's an auto layout if we don't like the position of something if you press command or control left or right bracket not only are you moving it in the layers panel you're actually moving it in the auto layout as well so you can copy and paste more new items inside of here and they're just going to jump right into the stack but that's a simple way to start using auto layout to create simple things like buttons but then also more complex things like table cells things that expand that way if you're looking at it on a desktop or a laptop or down to a tablet or cell phone it's gonna work no matter what well that's it that's auto layout inside of figma question of the day how are you going to start using auto layout inside of your projects is it going to be game changing is it going to be amazing let me know down in the comments if you enjoy the video make sure to leave a thumbs up subscribe to the channel hit that little bell icon so you know when another video like this one comes out i hope you guys are having an amazing week hope you're designing amazing things hope you're making amazing things and i hope you're using auto layout and working smarter not harder i'll see in the next one

Channel: Jesse Showalter

Views: 283,288

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design

Id: Do6HJBj984I

Length: 13min 15sec (795 seconds)

Published: Wed Mar 24 2021