Master Figma Auto Layout in 15 mins (Everything you need to know)

Auto layout is an amazing Figma feature that allows you to create responsive designs and can also save you a lot of time in the long run, especially when working on huge design projects. But a lot of designers avoid using auto layout because they don't understand how it works and how beneficial it is to creating consistent designs that can be adjusted easily in Figma and can be developed in code. That is why in today's video we're going to be designing this simple subscription card together using auto layout, starting from the basics. Let's get into it. All right, so we're in Figma now, and for this we are going to be designing this simple subscribe card using auto layout. Before we get into it, you can see that this has been designed using auto layout already, so it is responsive. I can add more input fields into this, I can delete them, I can extend this. Now let me get into some basics of auto layout that can help us understand what we are going to be doing. Here. So I'm going to move this and then I'll copy this here. One of the first things to think about if you think about auto layout from first principles is to think about auto layout as a way of using building blocks to design components and put components together in Figma. And this is how developers think about design as well. When they are designing, they think about everything as building blocks that can be put together, and auto layout helps you to keep things consistent. It helps you to keep spacing and everything consistent. And at the end of the day, in the long run, it helps you to have a very, very easy and smooth workflow once you've been able to figure everything out. So with this, you can see that this is made up of 2 building blocks, that is this one here and then this button here. Or you can see it's made up of 3 building blocks, which is this logo here, this text box here and the input field, and then this button here. Or you can see it's made up of 4, which is this, this, this, and this. However you put it, it is made up of all those building blocks. Now this is a container, which is the external bounding box of your elements here, and everything within it is its content. Also, this can be a container and everything within that is its content. Similarly to the way you can have this as a container and everything within that is its content. So with auto layout, when you're building, it's possible to have a container within a container within another container, which is totally fine. So don't let that confuse you. Now that we've gotten that out of the way, if you want to follow me with this design, you can find the link to this file in the description. While doing that, don't forget to smash the like button on this video and subscribe to my channel for more videos like this. Now we're going to design this subscription card starting with the simplest element here, which is the subscribe button. So I'll move here and then I'll start designing. So I'm going to type subscribe, and once I do that— let me move this closer— once I do that, I'm going to put this in auto layout. By doing that, I can click Shift+A. Once I do that, Figma automatically gives these margins around it. So that's giving this subscribe button a margin of 8, 8, 8, 8 around it. And if I want to edit this, I can always come here and adjust it and say I want the margin here to be 16 and I want the margin here to be 10, for example. I can also say that I want to give my background a color because right now it's transparent. And I can say I want it to be purple, right? Once I've been able to do that, I can also change the text to white. So I have a button. And as you can see, the button is already responsive. No matter what I type into this, it just responds with it. So now we have our button in auto layout. I can also say I want this to have some rounded corners and give it the rounded corner of 6. Now one of the things to always pay attention to in auto layout is your specifications here, which is the paddings that you want to have and the margin between your button, and also the properties of that auto layout here. Here this is set to hug and hug. So this is basically saying that this container here should hug this content. So I'm going to rename this and name it button. I can choose to say that I want this container to be a fixed width. I don't want it to hug the content, I want it to be long and just give it a fixed width of 200. That is how you have full-width buttons like this. But I can choose to say I want it to hug content as well. Now that we're done with the button, let's go to the next element, which is the input field. So with the input field, we have the email address. Right, once we have the email address, you can make this regular, and then we can do the same thing, give it its own auto layout as well. It has given it its own frame, and we can make this white. It has already given it a white color, as you can see. Similarly to what it did to the button, it has its own padding around it, and I can make this 10, and then Because this is an input field and not a button, I want this to actually have a fixed width of 260. Once it does that, it puts this text in the middle automatically. And then that is where I get to adjust how I want the text to be positioned within this container. The text here is the content and then the frame around this is the container. So once I do that, it aligns it to the left, right? I can also give this its own rounded corners, say 6 as well, or 4. And then I can also give this a stroke just because it's an input field. I can give it a stroke, and I can also add a label to this input field, say I want my label to be email address. Once I do that, I can bring this here and I can make this have its own auto layout because I want the spacing between the label and the input field to be consistent, and I want to be able to adjust it at any point in time as I'm designing. So I'm going to put this into auto layout as well, and here I can change the um, padding to 4, or I can change it here as well. So once I have that, I have my input field. The next thing we're going to be doing is the text, right? So with the text, we have— you guessed right, we are going to do the same thing that we've been doing. We are going to put this and this into their own auto layout. The reason why I'm doing that is because I might want to adjust the spacing between these at any point in time, and I don't want it to affect anything. I don't want to have to remove it or do it manually, so I'm already doing that right now. So again, I have this in auto layout, right? So I have my button, I have my input field, and I have my text, right? There are 2 more things, which is the Figma logo here and then the icon here, but we'll get back to that later. So now that we have all of this, let me just rename this. It's always good to name your layers so that you can find things easily. So once I do that, I can then put all of this into one auto layout, right? So I'm saying that I'm grouping all of this together, but the way I want to approach this, I want to think about this in the terms of the elements that are common to each other, the elements that are close to each other, right? To me, I feel like the input field and the button have a closer relationship than the title and the input field. So I'm going to put the input field and the button into one auto layout so that at any point in time I can adjust the spacing between the input field and the button individually. So I would say put this in an auto layout as well, and I would say that the spacing between this, I want it to be 16, right? So it means that this has its own auto layout, and then now this is together. And I can type— name this input field and button, right? So once I have that and I have my title and description, I can now put all of this in its own auto layouts. Right. Once I do all of that, I can now give this a margin of 16 by the sides here and 24 here. So it means that I now have a background which is the container of all of this. And for that, I can say I want my background to be white, which is already there. And I can also give my background rounded corners of 8, or yeah, I think 8 is fine for the rounded corners for that. Now I want to bring in the Figma logo. I can click this and come here, and I can easily drop this inside here, honestly. But when I drop it there, it comes to the bottom here, so I can adjust it and put it anywhere I want it to be. Do I want it to be in between this? Do I want it to be in between this? Or do I want it to go all the way up like this? The reason why I'm able to select the exact place that I want it to be is because already grouped all of this together, right? I've already put this and this in its own auto layout. I've already put this in, in its own auto layout, and I've already put this in its own auto layout. So when I click this, this already shares the padding for the entire thing, right? And I don't like that. I don't like the fact that I can't independently adjust the padding that I want between this icon here and the text here. So what I'm going to do again is to put that into their own auto layout. So once I have all of that done like that, I now have my card, right? And for these, I can now introduce the icon that we have here and I can bring this and say I want to put it inside this box. So I have all of that here now, right? But when I try to adjust this, You can see that it feels like there's no relationship between the container and the elements inside it. And I'll show you the reason for that now. Now I need to start giving each of the elements that I've put inside here their own specifications so that they can be responsive. So I can say I want this to be hug-content. So I'm saying that at every point in time, this container should always hug the content and leave a margin of 24 from the top and the bottom and 16 from the left and from the right. Then I will set this to fill container. So I'm basically telling you that I want you to fill this entire container like this, and that is what it has done here, right? I can also come here and say that I want this to fill container as well. It is already filling the container, but I want to set it like that so that at any point in time when I adjust this container, it can always be responsive. Then I'll also come to this text here and also put it on fill container because right now it's on fixed width. The width is fixed, so if I adjust it, it is not going to respond, right? So I will put this, this text as well, I'll put it as fill container, right? And it has gone down like that because this entire thing is on hug content. So I have to put it to fill container so that way it fills it. I have to do the same thing for this as well and make sure that this is fill container. So I can set this entire container as well, everything here I can set it to fill container, and I can also set this to fill container. So what I'm basically saying that everything here should fill container, including this as well. I set that to fill container as well. Since I've set everything here now to fill container, whenever I adjust this, everything just responds with it. So now what we're going to do is to format our form a little bit more. So here I want to adjust this and make it 16, to make it 16, semi-bold. And then I'm going to reduce the text here to 10. You can see that when I reduce the text here, everything just adjusted. Imagine that I didn't make this auto layout initially. 10, it would just affect everything and I have to be manually adjusting it. So now I make this 10, and then I will reduce this as well to 11, and then also reduce the color for this, and then also reduce the— and then also reduce the color of this stroke as well. Then I will come here. As you can see, this icon here and this subscribe button are both in the center, but I want it to fill the container as well. I want the icon to be at the far right and the subscribe button, I want it to be at the far left. To be able to do that, all I need to do is come here and type auto. And it just fills the container with that. It means that I've asked it to put an automatic padding between the subscribe text here and this arrow while still maintaining the initial margin that I have specified for this button. So I can also make this bold. So there we go, we have our card fully responsive. As you can see, it's fully responsive, and I can add multiple elements into this without breaking it. I can add— I can duplicate this without breaking it as well. So let me just put this on a, on a frame so that it pops, right? So you can see it properly. Um, and we're going to give our frame nice dark color. So there you go, see our card, and it's all done. I hope you're able to learn a lot about auto layout from this video and you can confidently apply it in your next design project. Drop a comment if there's any other video that you'd like me to make and I'll be sure to get to it. You can also watch another video I made on Figma's new update to auto layout. Don't forget to smash the like button on this video and subscribe to my channel for more videos like this. I'll see you in the next one.