How I Make Figma Auto Layout Super Easy!

What's up, party people? I'm Dan Mall. I help designers make more money and get their flowers. And I'm making a quick video about how I use auto layout in Figma in a way that's not confusing or not too complicated. Uh, recently my friend Dan Petty tweeted about auto layout and his frustration with it. He said, I've been using auto layout and components in Figma for the last 2 days. I'm trying to see if it'll make my life easier designing all these interfaces, but it's only causing me so much headache and so time consuming. How do y'all design like this? You're all monsters. It's true. You're all monsters, but at least you could be monsters who are productive in Figma and friendly to your peers and to your, your future selves. So I wanna show you how I use auto layout in Figma. I'm gonna use this design that I've made for the, my new program, the Make More Money landing page that I designed in Figma and then built in Framer. And I'm gonna show you in two ways. For those of you who are like, I don't wanna watch this long tutorial, I just show me how you do it. Don't explain too much. I'll just show you a really quick way that I do it. I won't explain why what I'm doing, but at least you'll see how I, I get to do it. And then I'll do a second pass and I'll talk through my thinking. For those of you who are like, what was that? What did you just do? I'll talk through my thinking. So first pass, let me just show you, let me zoom out here. Mostly when I design, I don't use a lot of auto layout at all. I don't think there's even any, there might be a little bit on this, on this comp. But then later I'll go back and if it's helpful in how I'm building or helpful to hand off to somebody, then I'll do auto layout as the next pass. For those of you who have done my design system courses or things like that, you know, that's what I generally pre- I preach and teach is that you systematize afterwards. Once you know the things that need to be a system, not everything needs to be auto layout. Some things don't, some things you don't need to for lots of reasons. So let me just show you a couple, couple things that I'll do here. I'm gonna zoom into this text section here. And again, I won't explain too much, but none of these have auto layout on them. I'll use auto layout basically for one thing, which is I want things to grow and shrink if there's more or less content. That's like the first most basic use of auto layout. So I'm going to set myself up for this pretty easy. I click on this, click the auto layout button over here, or Shift+A, auto layout. It honors the spacing that you already put in here and you're done. That way, if I want to add more to this headline, I can.

Right.

So you see, as it's— as I'm adding more text, it's growing. It's honoring the space that I have in here.

All right.

That's basically it. So I'm going to go scroll down here. I've got another section that's a headline and a text. Same thing, auto layout, boom, done. Next one, uh, auto layout on that one too. And that's great. Um, the only other thing that I'll do now is I don't like using the gap that's built into auto layout in Figma, which is this property here. I like controlling the gaps of the spacing between elements myself manually. So I'm gonna zero those out. What I tend to do is I like to have a frame. That I draw in here. I will fill the container with the frame. I'll set the height manually, 80 pixels, 120 pixels, something like that. Rename the layer Spacer, and sometimes I call it Spacer 80, knowing that that's an 80-pixel spacer. And then wherever I want space, I'll control it manually with a frame that has a manual height. So that's what I'll do.

Set this one here, same thing.

Zero out the gap.

Set a frame, fill container, 80 pixels, rename that. Oh, and I remember I could have just copied. So let's do that for the next one. Zero out, paste the spacer in here. Bang.

Okay. That's as much Auto Layout as I was, I would do in here. Next element. Let's scroll down the page. And again, remember I'll come back and explain for those of you who are like, I need to know what you were thinking when you did that. Same thing here, a little bit more complex now because now we've got two directions of layouts. We've got a vertical layout for these two elements. We've got a horizontal layout for this element and this element, and then we've got dividers and all that stuff. So again, I won't explain too much here. Let me just quickly run through this and then I'll explain afterwards, but follow along if you want to see how I do this. Auto layout, zero out the gap.

Oops. 0. Put a spacer in here. Fill container. 40 pixels, sure. Rename this Spacer 40. I'm gonna put one underneath as well. Okay, and this line is just a line that I drew. Bringing that into the frame. Okay, got a spacer there. I want this one Fill container. Alright, so that treats this part, but now I want to bring this number in. So I'm gonna bring this number here. New frame, auto layout that.

Align this to the top. Again, I want to zero out the gap.

Mm-hmm. I'm gonna set this width to itself. I'm gonna put a frame here. Actually, better way to do that. Is to use auto and set the width of this manually. There you go.

And then I'll wrap this one more time in a frame.

No gap, directions vertical. I'm gonna bring that border out to this Okay, and then to create the space, the gap that I want, spacer. There's the space that I want there, and let's go with 40. And there we have it. So now this element right here This— whoops—

this element right here is all auto-laid out. Now I want to do the same thing with all these other things. So I'm going to go back and I will have to redo some of this stuff. Let's hide these frames.

And now I can duplicate this. I'm going to hide all this stuff too. Duplicate this. 3 times, 4 times.

It's all stacked on top of each other. I'm gonna auto layout this, and now all of them are in a row like that. And I could add a gap to put some space in between here, but I'm not gonna do that. You all know why, because I like my spacer GIFs. I'm gonna use a frame for that.

There we go. I could do 80 if I want to. Let's move this out here. Let's do 40 in between. Put that here. Come on. And duplicate that, and then duplicate that. And there we go.

So there's my auto layout. That way, if I ever have to change this, I want to put more text in here, the whole thing is controlled and the whole thing moves up and down. Okay, that was the fast version. If you get that, you don't need more explanation. Hope that helps. That's basically all the stuff that I use auto layout for and doing that really quickly. Anything more nested than that gets really complicated. So that's the way that I use Auto Layout. Now for those of you who want more explanation, you're like, well, that was way too fast, or like, I didn't get what you did. Now we'll do the slow version. I got another copy over here. So let's go over here to this same unlay— unauto-layouted version. And I want to talk through kind of the thinking on, on some of this stuff. One of the things that helped me figure out Auto Layout in Figma was actually to build stuff in Framer. Once I started using Framer and started figuring out how to do essentially flexbox in Framer using a GUI, that actually helped me understand auto layout even more. I didn't understand it that well, but let's go into Framer and let's build some layouts. So let me switch over to Framer for a sec, and I just got a, a blank frame in Framer set up now, and I wanna set up a couple of layouts. So let's change the background. We'll give this a dark background. And let's just say I want to create a couple of layouts of some specific things. And you know, I'll jump back and forth between Figma and Framer. So here in Figma, let's say I want to create a layout that's like a headline and then some text with some space in between. Right? So if I were to do that, I would create a frame in Framer. So F key, I'll draw a frame. And right now it just sets up to be wherever I draw it and it absolutely positions this thing. The problem with that is I don't want everything to be absolute position. I want things to have flow and that's a good use case for layout. So the first thing I gotta do is I gotta give this page, or let's go in the layers. I gotta give the desktop itself a layout. So right now there's no layout on it. That's why things are absolutely positioned inside it. I give it a layout, uh, which, which creates a stack. Um, so in, in Framer I can create stacks or I can create grids. Grids is close to using CSS grid. Stack is, is close to using Flexbox. So I'm gonna use stack. If you don't understand the, what the CSS part of it, don't worry about that part. If you understand auto layout and Figma a little bit more, think of stack as sort of like an auto layout thing, right? So I'm creating this stack. I can create a fixed width on it, or I can tell it to fill the entire width, which I'm gonna do. So that fills the entire width. That's the same thing as in Figma. If I were to take a frame and auto layout that, whoops, sorry about that. I was to say fill container, right? That's the same thing as setting a stack to fill. So now I have a filled stack with a fixed height, right? So let's say I want to put some text in here. Let's draw a T key. I draw some text. And again, once I draw an element, because there's no layout on the stack yet, it just absolutely positions it. So I have to tell the stack, let me give you some layout too. So layout I'll add and I'll create that stack. And again, and this is what helped me understand Auto Layout and Figma more is it basically says direction. Figma has that. It's a little bit more complicated in Figma, right? In Figma, we've got these icons, which are a little bit more convoluted. But once I was building in Framer, ah, horizontal or vertical, which way, which way do you want this to lay out things? And I'm like, oh, cool. So I want this, if I'm building this thing in Figma, I want it to lay out vertically. Okay, so let's lay out vertically. So let's say this is going to be my headline.

All right. And I'll type here, Lost in the— what's it called?

Lost Without a compass.

All right. Lost without a compass. Okay.

And then I'm gonna have another element here, right? Ah, you see that? So when I duplicated it, it automatically put it in a layout because I gave the stack a layout that said go horizontally. If I switch that to vertically, it's just automatically gonna go put it in a layout and try to honor all of the props and all of the dimensions that I give it. And then, and then make some good guesses about things that I don't give it. So when I had some of these elements, they have by default a fixed width and a fixed height. So Framer's trying to honor that and say, okay, I'm gonna work with your fixed height and your fixed width, and then I'm gonna lay it out in the way that you said to, and this is the best thing that I can do with that. So what I can do is I can give it something a little bit different. I could say, well, I don't want you to have a fixed width. I want you to fill the width, right? And there you go. Now it fills the width of the, of the layout of the stack that I've given it. I can do the same thing here. I can say, I want you to fill the width.

All right.

And let me, let's copy and paste some of this text here.

All right. And I'll just paste some text in here. Okay. Okay.

So now I've got these two things. Now both of these things have a fixed height, which I don't want. So the height that I want this to have is I want it to fill, fill, excuse me, fit the content. All right. So this one has one sentence in here. So I want it to be only as tall as to fit one sentence. Same thing with this. This one has a couple of sentences in here. So I want it to fit the content, which gives it that much. Now with the stack, right, you'll see that this text overflows the stack because the stack has a fixed height. So the stack, I want to give it fit content also, right? So now it is the only the height of the content inside it. But if the content inside it grows, now I can— now the layout will flex because of that. So if I add more content, you'll see the stack actually got larger. Okay. So I'm going to go back to Figma. And that concept is the concept of, uh, of Figma's auto layout. So that's the way that I use auto layout. Uh, and, and the same thing here. If I go back to Figma, if I want to, uh, to Framer, excuse me. If I want to space in between here and let me just change the size of this, just so we know it's a headline. Let's go with 40 on this.

Okay.

We've got our headline. If I want some space in here. I could do it by adding some gaps here, but again, I don't like doing that. Instead, I will create a new frame that I'll put right in the center here. I want it to fill the width, and then I can just adjust the height of this, keep it at a fixed height, not fit content, not fill, not any of that stuff. I can adjust the height of this to whatever I want it to be. And that's the thing that creates the space in between. So once I started building some of my layouts in Framer, that actually helped me to understand auto layout. A lot more and use it a lot simpler in Figma. So let's go back and do the same thing here. Uh, you just saw me do this in the fast version, do a little bit slower. I'm gonna zero out the gap here. And then what I'm gonna do is I'm gonna put a frame, F key, frame here. I'm gonna fill the width, uh, fill container, and I'm gonna set the height manually. So let's say 80 pixels. Um, and this gives me some flexibility. I'll name my layer here so I know that this is my spacer. That gives me some flexibility now because what it allows me to do is allows me to say, oh, I want a subhead in here, right? So if I can duplicate this, I'll drop it below the spacer, create a new spacer, drop that below here. I can put a subhead in here. Let's say, let's shrink the size of that. And because of hierarchy, I don't want the same amount of space in between these two headlines than in between this headline and this text here, because the hierarchy doesn't make sense. I want these two things to be locked up a little bit more.. And having spacers actually allows me to control that without having to worry about the gap properties, because I only have one gap property, but I want two different size gaps here eventually. So just having this methodology of using spacers, spacer frames, or frames that are, that are fixed width that I named spacer here. I know that all of my space is controlled by the frames that have a fixed width or fixed height, excuse me. And if I'm doing layouts the other way, left to right, then I can set it to have a fixed width and then a filled height. So let's do that one. Let's do that version here. Let's see what I have in here that will, that could use that. All right, maybe let's do something like this. Okay, let's go back to this one here. So this doesn't have any auto layout on it, right? If I have, if I want to put auto layout on it, I could, right? And it would just, with this simple thing, two elements, that's what I find is the easiest to do auto layout on. 2 elements because Figma will basically leave it alone. It'll say like, I'll just assume that the space between them is the gap that you want on the auto layout. And I Shift+A or hit the auto layout button, right? And now it's got auto layout on it. You'll see that the icon has changed. This is the regular frame icon. And now here, this is the, um, the auto layout icon, right? And nothing really has changed visually. And Figma has just guessed correctly that a 36-pixel gap is what I want here.

Right?

So I'm gonna zero that out. Because it's like, thanks for the good guess, Figma, but I also want to control this manually. So I appreciate it. I'll take it over from here. Put a frame here, fill the container, set that to 40, rename my layer, underscore spacer. And now I've got a controlled spacing and that gives me the flexibility to add another headline or have a different size gap in here if I have 3 elements instead of 2.

Right.

So, okay, now I've got that. I've got these 2 in an auto layout frame. I want to bring this, this number into it. So let's resize that number, the width, and I'm going to, I'm going to select both of the layers, the number and the frame, the auto layout frame that's controlling this. And if I just click the auto layout button, it will automatically put a frame around it. So I'm gonna click the auto layout button and now there's a frame around it. And by default, Figma has guessed something and it's like, eh, I didn't guess what I actually wanted. It aligned it vertically center. But what I want is I want it to align the number. I want to align all of the things in it top left. And what Figma also did was it guessed that the gap in between these two things, because this is a horizontal layout, the gap between these two things, it's like, yeah, that's a good guess. But again, I want to zero this thing out. And there's two ways that I can control this. One is I could put a frame right in between here, right? So let's put a frame in between these two elements. And I'm gonna do it the opposite way as I did it before because the layout is not vertical anymore, it's horizontal on this particular frame. So I'll take this frame, I'm gonna call this Spacer.

I'm gonna rename the layer to Spacer.

And I'm gonna set the width manually, but I'm gonna let the height fill the container. So you see that, right? The height now filled the container. And what I can do here—

let's zoom out—

what I can do here is control the width manually if I want to. All right. So I could do it like that. I could control the width that way. Figma also, the auto layout also has this cool thing. That's really helpful where, let me delete that spacer. And what I can do is I can tell the frame to, instead of having a zero gap in here or honoring a manual element that I put in here, that spacer frame, I could say auto. And what auto is going to do is it's going to be like, well, I'm going to push the thing on the right all the way to the right. I'm going to push the thing all the way on the left, all the way to the left. And then I'm just going to let the space in between be dictated by how wide the element is. So right now the element is only as wide as the stuff in it, which is why you see no gap in here. But if I manually set the width, uh, whoops. If I manually set the width of this element, you see now Figma is just saying like, all right, well, I'll just put whatever space in between them there is, there is available, right? Because this thing has a width, this thing has a width. And it's like, I'll just put— and so you see there's no gap in, there's no gap number here. It's just using auto. Uh, and if I edit it here, okay, well now it goes back to manual, right? So lots of good flexibility in that. But I don't wanna leave it that way because I don't like this auto thing because I just prefer to have my own manual control. So I'm gonna get rid of that auto again. Let's go here and I'm gonna go and draw a frame in between this like we did before.

I wanna make sure it's up here.

Uh, we'll call this spacer. And sometimes what I like to do is I'll call this like, like hspacer for horizontal spacer or vspacer for vertical spacer. If I want that specificity, sometimes I need it, sometimes I don't. So I just, it just depends on the moment. So I'll call this hspacer. Um, and I'll go over here and make it fill the container, the container's height this time, not the width.

All right.

And I'll make this width manual. Um, so I might say, you know, 80 pixels or 160 pixels. You know, or whatever I need it to be, you know, I'll kinda outline it that way. So now I have this, this done and now I just have to get this divider in here. So the problem is this frame here is auto layouted with a horizontal auto layout. The parent frame is auto layout with a vertical, vertical auto layout. So this is where I want that line to be. So let me bring in that line. Into that parent frame, right? And you see it appears on the top. I'll hit the down key to make it below. And now what I need is a space between the horizontal frame and the line, which you guessed it, I need a frame there that I'll put right there. Um, so let's put that frame again. It's gotta be nested in the right container. Uh, I'll call this V spacer on that one. And what I can do is I can make it fill the container and I can set the height manually just like we've been doing. And there we have it. Now we have a full auto layout container. But if you just look, even just this that we did, we have essentially 3 nested frames there that this one has a vertical layout that's inside of one that has a horizontal layout that's inside another one that has a vertical layout. You see how complex it really gets. And this doesn't even include the rest of the page. If we were going to auto layout the page, if we just look at the rest of this layout, right? I haven't even done these other things yet. So let me just do those real quick just so you can see. Let's hide, um, the, all the, the ones that are done manually. We'll hide those. And then I can take this one frame. Let me duplicate it 3 times. Right? So I duplicated it, but they're all just sitting on top of each other. If I select them and then I auto layout, Shift+A, you'll see, okay, now they stack. And again, I could put a gap in there, but I don't want to do that with gaps. So I'm gonna wanna do that with my own spacer frames, right? So let's do that. Let's get some spacer frames in here. I'll say spacer and we'll make this one, you know, 80 pixels in between. And let's put this below right there, right? So then, and then I'll do another one and another one. And that's how I've got my space in between all of these in a way that is growing and shrinking. If I wanna add another one or if I wanna remove one, You know, you'll see how that space just collapses. And that's what I want. I want it to grow with more content and shrink with less content. You see the work that is involved in that, and we aren't even at the most complex level yet. So there's a lot of stuff that we can do from here. I'm gonna stop here. There's a lot of stuff that we could do from here to make it even more flexible, but with more flexibility sometimes comes more complexity and it's not worth it a lot of the time. So this is generally where I'll stop for a, for a comp like this. I don't need to do anything more than this. If I was going to use this, this thing over and over again on multiple pages and have variations of them, the next step to this would be I would create a component and then I would reuse that one component. That way, if I ever needed to edit, I don't have to edit it in 4 places. I can edit it in one place. I can pass content dynamically. I could even hook it up to external sources for and pull in content using plugins or Google Sheets or all sorts. So there's all this complexity we could add on top of that. Generally, I don't, just because the level that it would take to manage the complexity is just not worth it for the, for the maintenance of this, right? So I'll usually stop here. Last thing I'll say about it is, as I zoom out, there are things that I just will never do auto layout with. One, because they don't make sense, and, or number two, sometimes even though what, even though they do make sense to do it, like why, right? It's just extra work for no additional benefit. So a section like this on the layout. It's so, uh, just because of the layout, I don't think that auto layout would be easy to use, set up, and also maintain on this. So I wouldn't do this whole section with auto layout. The most that I would do here is maybe the, the, the parent frame of this hero. Like, let's see, where do I have it? Um, hero image, this frame, I might do this frame as auto layout, or I just might convert this into a frame and then do the parent frame of the whole page as auto layout. That way if this section grows and shrinks and the rest of the page will do that. But inside this frame, I wouldn't have any auto layout, maybe with the exception of this, you know, like I said before, two elements, that's pretty good for, for auto layout. So I might do this as two elements or maybe three elements is like text, a spacer frame in between this to control the spacing and then the button element, right? That might be an auto layout frame within the frame of the hero within the frame of the page. Um, but again, the more you nest, the more complexity there is. And the harder it is to maintain. And that's what makes all of us monsters. So don't be a monster. Do only as much auto layout as you need. I hope this is helpful. If you have any questions, let me know. I'll reply to it or I'll make another video. Uh, hope this helps you in your Figma-ing and your auto layout-ing. Have a good rest of the day.