Lessons: 5Length: 37 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Stacking Items Horizontally

Let’s take a closer look at auto layout and how we can use it to stack items horizontally.

2.2 Stacking Items Horizontally

Hello and welcome to lesson number two. Let's take a closer look at Auto Layout and learn how to stack elements horizontally. So we're back here in Figma, I created some simple demo elements here. And we're gonna use these to create a horizontal Auto Layout. So as I mentioned in the previous lesson, there are two ways you can do this. If you have an existing frame, you can select that and add Auto Layout. Or you can select a bunch of items and right-click > Add Auto Layout, or use the shortcut Shft+A. So pay close attention to this Layer panel here on the left. When I hit Shft+A, it's gonna automatically create a frame that contains all of these items. Now what's cool about Auto Layout in Figma is that you can nest frames, so this frame is nested in this frame. And actually I can add Auto Layout to this parent frame as well. So this creates horizontal Auto Layout, and it adds the correct padding and spacing between items. I currently only have one item here, so I can set this to 0, it's gonna make no difference. And l can also set equal values for padding on this parent one. Now on this one we're gonna switch things up to Horizontal. And by doing that, Figma took all of these elements and stacked them next to each other in a horizontal manner on the same line. As you can see, it added 0 for padding and 0 for spacing between items. Now if I start playing around with this you'll see that the distance between items is slowly increasing. Let's do 30. Now here's another cool thing. The parent frame, in this case, also resizes with its elements, right? So notice my my frame here, notice how big it is, it's 13, 20. But if I increase the spacing here, it gets bigger automatically. It's now at 1,400. So this is a great way to create UI designs because it's so much easier, it simplifies the workflow a lot, and it just saves you a bunch of time. Now, what's really nice about Auto Layout is that you can, for example, change the position of the items by simply dragging and dropping. Look how cool that is, so simple. So I can move this here, I can move this red here, and everything else is rearranged automatically. I don't have to do it manually, to recalculate the distance between each item, it's so easy. Now, there is another option when using Auto Layout that we haven't talked about. And it's this one right here, it's Auto Height or Fixed Height. Auto Height basically means that the height of the frame is calculated automatically based on the height of its children element. So if I were to resize this bit, you'll now see that the height of my frame is equal to the height of the tallest element. The opposite of that mode is that I can set a Fixed Height and I can enter the value manually here. So for example, if I want 400 pixels as my height, you'll see that the frame is now 400 pixels in height, even though its tallest element is nowhere near that value. So that's pretty cool. Now you might be wondering why these elements look like this, they're not exactly properly aligned. Well, the cool thing about frames with Auto Layout is that you can select each individual element and align it in a different way. So in Horizontal mode, because our parent frame has Auto Layout in Horizontal mode, each children can align at the top, in the center, or at the bottom. So for example, this I can put at the top, I can select this and put it at the bottom. I can put this in the middle, this is also in the middle, I can put this in the top. So it's super easy to create these arrangements. And because I still have Auto Layout active on my main frame, I can still work with the distance between items, I can set this to 100, for example. I can even set a padding, let's say 30 on the left and right, 30 on the top and bottom. How cool is that? And because this is a frame, I can also add a fill color. I can add a stroke, drop shadows, and all sorts of things. Pretty simple, right? This is such a useful feature, and I'm so happy they added this to Figma. So that's how you can stack, or work with elements that are stacked horizontally. What about vertically? We'll cover that in the next lesson, see you there.

Back to the top