Learn Figma Auto Layout in 10 Minutes (Everything You Need To Know)

if you're not designing with auto layout in 2023 you're wasting precious time in this video we're going to cover everything you need to know about Auto layout and figma so that you can design websites in record time let's get into it so for those of you who don't actually know what Auto layout actually is take a look at the website that's right in front of us here how would we build this exact thing using CSS and HTML we'd probably use a flexbox and then we probably have to align it vertically and horizontally somehow and then we're going to need to adjust the spacing here that's great but how would we actually go and do this before we get the building done right when we're designing how do we accomplish this that is the point of Auto layout that's what Auto layer is trying to achieve if I can explain it in one two sentences it's trying to mimic what CSS and HTML can accomplish with real life websites but in this step before so that you can understand more about the correct spacings the correct positioning everything you need to know to build the website in the correct conditions so what I've done here is I've taken a screenshot of the website that we were just on this website right here and we're going to do a mock translation of this this site this design into Auto layout so that you guys can see just how easy Auto layout can be it doesn't need to be a scary thing to get into it so let's go ahead and break this down so I've taken the liberty of creating a few designs here so these designs are trying to Showcase how we're going to try to build this using Auto layout and to get started we're first going to need to put in a frame so we're just going to use the desktop one 1440 and this should be pretty standard this should be the one that you're using anyways so to get started with the top design let's just do that first we can go ahead and click shift a and that's going to need to be in your head a lot in this video because shift a is the shortcut for auto layout in figma and we're going to be able to add in some padding here on the left and right side and we can just do this using shift so that it's nice and even and we'll do one 44 for now we can do that so now anything that we add inside here will have that spacing on the left and right side that's called padding and then we can add some padding on the top and the bottom here but we're just going to add in zero for now and we're gonna point this direction to be down so anything that we add now we can automatically stack it on top of one another so I'm just going to undo all of that and let's get into the first design here so to break this down we've got a few different things here let me just clip this so we can only focus on one design for now so let's see we've got an image on the left and then on the right side we've got the actual content so even now just to get started we can go ahead and just do that we can create a new frame I'm going to just hold my shift key and we're going to go back to the frame and we're going to make it a fixed width of 1440 so that we always stick with that exact size so we have this Frame here we've got 1440 for the overall desktop let's go ahead and we can actually just bring this image in here let me just crop the actual image so we can see what we're doing I'm just going to paste it inside of the frame so now we've got the image inside of the frame but let's focus on the text which is I would argue the the hardest part the most challenging part of this build so we can go ahead and create a text block here just typing in no more restriction I'm just going to mimic what the text says here and we can give it a appropriate size around 48 pixels okay so now that we have the top text here all that we need to do from here now is add in text and then we're going to use Auto layout to format that text so that it fits within the correct layout so I'm just going to add a body text here and we can see that we start to see some problems already even if we point this down so we can go ahead and start our Auto layout formation here so let's go ahead and move this to the right side so we have text on the left or text on the right side and the image on the left and then we can maybe make this 16 pixels and now we can start to use the auto layout function so let's go ahead and press shift a and that'll create a new frame new auto layout and we can then point this down and we'll see that we've got spacing here as well so on the right side here we've got your auto layout canvas almost this is where you're going to control everything that has to do with auto layout you've got the direction that you want your auto layout to be going whether it's to the bottom or to the right vertical or horizontal then you've got your spacing here and then you have padding on the left side and padding on the top and bottom side and then on the right side here we've got alignment and we're just going to get into that in a little bit which is important but for now we don't necessarily need to do that and then we've got the advanced layouts here which also we do not need for now so let's just focus on what we've got going on at the minute so we've got text up and down and then we've got these three boxes now how would I create these three boxes to be exactly the same every single time without Auto layout it would be a huge pain that's how so I'm going to create a quick icon here just as an example and I'm going to paste it into the auto layout that we already have created here and I'm going to duplicate this text and put it to the bottom and then we can go ahead and create another text and I am just going to add some lorem ipsum here okay and we can reformat this to be around that big so now let's go ahead and make this bold okay and now what we can do to format this text to be similar looking to this is we can go ahead and click on the elements that we want to just holding shift and we're going to press shift a and that is going to transform it into an auto layout so again we've got a few things to to consider here we've got eight spacing on everything we've got eight spacing on this exact frame and then within that everything is pointing down so the direction of both of these Auto layout frames are pointing down so we can do now is we can just duplicate these three select those two and create a new auto layout frame and point it to the right side and what we can do now that we have these three frames is we can start to play around with the hug and the fill resizing so we can go ahead and go on to the right side here and click on fill and what that's going to do is it's going to set the overall container to be fixed so that the content itself can be filling the container just like that okay so let's go ahead and make the top two text here into an auto layout as well and we can maybe do 16 pixels and for this content we can maybe use 16 as well or maybe even 32 and overall for this entire Auto layout we can use maybe 48 something like that so now that we see that we're getting pretty close to this already and we can finally use our alignment here to figure out how we want to separate these two objects so right now we have the top left alignment and we see that if we go on to the top right we'll see the text and the images everything is going to move around so I think for now we can choose the middle one and we notice that we need more spacing here so to do that we can either use this handle right here or we can just type in the standard which would be something around 80 or 60 something along the lines of that and just for simplicity's sake I'm going to take the color of this background so you can start to see what it should look like in this case and we can just take these colors okay and let's create this last button here so we can see what that would look like using another frame and we see that that was pasted outside of the auto layout so we want to paste it inside go ahead with that I'm going to type in button so now we've got a pretty similar layout to the actual real life scenario that we just copied it from but what would we do if we wanted to copy the rest of these would we have to create all of this layout again probably not it'd be easier just to duplicate this we can click command D we can duplicate that paste it on the bottom just like this and these two sections we can then use Auto layout to get them close to each other so then we can simply just move this around like this and have more control over our content now this is a bigger paragraph so maybe I can take this one right here and we can move this down so it looks a little bit closer we can see that there's more spacing between the button and the big text here so let's go ahead and change that so it's as easy as just typing in the number that you want to see here and it is quite literally that easy to use Auto layout all you have to do is type in numbers and the design will change itself so that's the beauty of it we can then take this image right here place that just like that and we can change the color of everything here so for this button we can then use the green change this to White change this to White and there we go so we're getting closer and if we want to add another one go ahead and do the same thing change the direction of that or to change this image here align it to the top just so we can see the image that we want to work with these two and we can then add some padding on the top here and so we see that very quickly we can start to paint this picture of the entire website that we want to see just using Auto layout so everything I've been doing here has been done in a few minutes so we can see that we have the entire section built up in around 10 minutes here or a little bit less I'm not sure what the exact time was but what we can see using Auto layout only using the canvas here only using the alignment up down left and right we can see that we can really get a lot of control of what our design should look like and if we take a look at the frames themselves yes they're not necessarily correctly named in this case but we can simply change that using the basics here so if we select the frame here we can change this to content rename all of these to content as well maybe these three can be column dollar sign and N so we can see number one two and three this one can just be button so we can quickly start to rename the auto layout and the frames that we've created now you should be doing this as you design along but for this tutorial it makes sense that we just speed through it one last thing that we should cover in this tutorial is obviously going to be the top padding here we only cover that in the last section here but if we want to add padding to all of these it's very simple you just add in just like that and we quickly start to paint the picture of what this should be looking like now I don't know about you guys but this looks pretty pretty similar compared to our section on the left side here we can even change this to be semi-bold or bold that pretty much covers it for this video the last thing that I do want to cover is going to be an absolute positioning so absolute positioning was introduced only recently into figma and what it allows you to do is to put an element anywhere in a specific frame when you are using Auto lab so in this case we want to Simply use the frame itself or we want to change this image to be closer to the left and right side because as we can see the image does not float in space just like this so what we can do is we can press on the absolute positioning button right here and it'll do the following so it'll take it out of the equation completely it will still respect the clipping of the apparent elements but the positioning itself is now completely irrelevant so what we can do in this case is we can add more padding on both sides here on the top and the bottom and we can position this to be where we want it to be something like that we can reduce this a little bit always using shift so we're using the eight multiples and we can see that we're we're pretty much there right so if you guys learned anything in this video if you guys have any more doubts about Auto layout then do let me know Down Below in the comments right under the like button but I do think that this tutorial if you guys follow it it should be pretty comprehensive it's pretty much everything you need to know about Auto Leo it's just directioning positioning and mimicking what real CSS and HTML would be doing so with that being said thank you guys so much for watching this video and as always I'll see you guys on the next one

Channel: Arnau Ros

Views: 64,726

Keywords: figma auto layout 2022, figma auto layout responsive, figma auto layout tutorial, figma auto layout card, figma auto layout button, figma auto layout components, figma auto layout table, figma auto layout tutorial 2022, figma auto layout advanced, figma auto layout text, figma auto layout navigation, figma auto layout button with icon, figma auto layout responsive 2022, auto layout in figma, auto layout in figma 2022, how to remove auto layout in figma, new auto layout in figma

Id: To_ADCVSg5g

Length: 10min 22sec (622 seconds)

Published: Mon Dec 12 2022