[Music] hey everyone it's raji from figma again with another episode of figma in five this is our third episode and this is about auto layout and i like to think about figment 5 a lot like keanu reeves when he gets jacked into the matrix and he downloads the program and he knows kung fu so that's what we're going to try to do for you with auto layout today in sigma let's go let's talk about the auto layout basics i can select two objects and simply hit add auto layout or i can use the key combo shift a to add auto layout frame to this button now under the alignment panel here i can actually vertically align all of my child objects i can change my button appearance here and to create something that looks a little bit more like a button now in my auto layout settings here i can also add padding so here's a 16 pixel padding button and as i begin to type into it you'll see the magic of auto layout awesome let's say i actually drew a rectangle as my background for my button and then i've got some objects on top of it if i simply select all three and hit shift a figma's smart enough to know that the item behind it actually becomes the button background now in the same way we can apply our alignment settings and to create a flexible button for ourselves let's see what else we can do with auto layout we could change our direction from vertical to horizontal we can also change our spacing in between each child element of the auto layout frame as well as adjust the padding all around new to figma is the ability to change independent padding so i can add 8 pixels on the top and the bottom and 16 on the left and right another great little shorthand tip for you to know is that you can actually type in those values into the field comma separated so say i want 16 on the top 32 on the right 16 on the bottom and 32 on the left i can just type that in and it'll translate to the padding panel okay we're going to try to make this menu here but use auto layout for everything currently we just have a bunch of objects on the screen and that's not good enough we want to use the powers of auto layout so i'm going to take this home icon and this text and i'm going to hold shift a and that's gonna add auto layout to it now let's put it at four spec four pixels spacing in between we're gonna put this to centered vertically all right let's do a little bit more of a complicated example so i've got this list and it's set to vertical auto layout it's working if i duplicate the components within it it actually responds vertically which is great my biggest problem here though is that the components inside for the to do items are not set to auto layout so let's go add auto layout to them now first thing we're going to do is just add auto layout to it now it changed a few things and messed a few things up so we're going to have to fix those let's align it vertically the other thing we want to do on these items is we want them to actually fill the container horizontally so right now they're all set to fill container on the horizontal which is perfect let's check this text by holding command and clicking on that text we can see that that text was set to a fixed width we'll change it to a fill container and now everything should work the checkbox is fixed with fixed height this text will fill up the complete container and then of course this to do item in here is actually set to fill containers so it will fill the container so let's resize this container and see if we've achieved what we want this is perfect this is exactly what we're looking for because we now have independent padding let's say i want to indent this list here i can simply just go into the three grocery items go into their padding and adjust the padding on the left hand side to have an indented list now i've used the same component but overridden the padding settings on it to create this indented list you can see we've got a horizontal auto layout cat pile here and as we add those kitties it works as we'd expect now if we decide to change the size of this we can now have auto layout with a fixed width but how do we change the distribution of these kitties if we come under here we can change it to space between it'll actually distribute the space between these cats we can actually use this to create something like a face pile effect and we could still move these objects around in between i'm designing a dialog box here and i'd like to bring in some close buttons the first option i'd like to try is to put in this close button here now in our header i've set it to horizontally auto layout with 32 pixels padding and to fill the container on the x-axis now an easy way to pull this off would be to go change the distribution settings to space between you can see now that this close button is exactly where i want it to be my only issue with this layout is because this text here is set to hug horizontally it'll just keep on going off the screen the way to fix this would be to go into this text and set it to fill the container then it'll fill up all the available horizontal space we'll left align it and then we'll try adding more text again like we did before we can see now that it's wrapping exactly how we'd like it to wrap now what if we wanted to have a close button in this upper right position this is a little bit harder for auto layout but i'm going to show you a trick on how to do this i'm going to take this close button and put it in this frame now dragging and holding space i'm going to reposition that close button to the upper right holding space allows me to keep it in the frame without it falling out of the frame now what we'll want to do is make sure that we set our constraints to right and top for that button and we'll test it right here okay it's resizing perfectly let's take that frame and drag it into this dialog box we're going to set the horizontal fill to fill container now let's just test and see if this works as well this is working perfectly except for the fact that this frame is 32 pixels high i'd like it to effectively take up zero so i'm going to type in zero well zero doesn't work in figma so there's a zero height frame hack that works like this if you type in 0.001 it'll actually round down to zero and now we effectively have that zero height frame that enables us to do this complex layout of this button but it still responds to the container and one last trick for you today is how can you pull off minimum width or minimum height with an auto layout container well the secret here is that with the button i've set it to be a vertically auto layout button and i've added a frame inside of it now that frame is a lot like our last example where we have that zero height frame i've got this frame set to 150 and what this enables me to do is still have a button that has hug contents on the horizontal but as soon as you add text it actually allows for that button to expand hope you have a great day and i hope these tricks have been amazing for you and that's it for this episode of figma in five hope you learned a ton feel free to like and subscribe if you want to keep this content coming have a great day