2.3 Stacking Items Vertically

Hello, and welcome to lesson number three. In the previous lesson we learned how to use Figma's auto layout feature to stack some items horizontally. Now let's explore the other side, stacking them vertically. So, we're back here in Figma. I have yet again some demo elements and I'm gonna select these. Hit shift A, notice another frame was created. And I'm gonna set the auto layout to vertical. Now what I'm also gonna do is set auto layout to my parent frame. So now, our two frames look like this. And again, based on the position on the original position of my elements, Figma calculated that this frame with auto layout should have a distance between items of 107. But I can always go in and change this, notice the items are now arranging themselves properly. And just like the horizontal mode, we now have two options here auto width in this case and fixed width. So auto width basically means that the width of the frame is given by the width of the items, so that's on auto. If I do a fixed width, I can set the width of my frame individually here. So I can say like 500 and then the width of the frame is not influenced by the width of the items. So I can have shorter items and even longer items, all right. And this is also true in the case of horizontal auto layout. I just forgot to show you, but let's do that right now. All right, so if I have a fixed height applied to this and I resize one of these items, it just gets clipped. The parent frame doesn't resize with it, so the same is applicable here. Notice that this item is now clipped. And just like a horizontal layout, we have some alignment options for the nested items. So, here we can align to the center to the left or to the right. So here is left, center, right. And I can do this with multiple items at the same time or with individual items. We also have some arrows here and these apply to both horizontal and vertical. So when the parent frame is in vertical mode, we have up and down arrows, and I can use these to move a selected item or items up and down and change its order. How cool is that? The same thing goes for horizontal except here we have left and right arrows. And by the way, this is the same as selecting an item and dragging it. Or simply by moving its position in the layers panel. It does the exact same thing, but moving like this is easier. And using these controls is easier as well. Now, with auto layout and you saw me use this, you can always change the orientation from vertical to horizontal. It's no problem whatsoever. The items will just simply be rearranged in the correct direction. And as a quick reminder, you can have auto layout frames inside auto layout frames. So for example, this frame one has auto layout, but I can select, for example, these three elements, hit Shift+A. And they will be created in their own frame, in this case, frame two, that has auto layout. And I can have, for example, horizontal mode on my parent frame, and I can have vertical mode on my subframe. How cool is that? And you can have all of these values, or properties different for each frame. And that's how we can stack elements vertically in frame with auto layout. Now so far we've seen some pretty abstract examples, right, and l did that on purpose. Because l wanted you to get the basic idea of how to work with this new feature. But what about some more practical ones, right? We'll take a look at some best use cases for Auto Layout in the next lesson where we're gonna build some, some pretty cool examples. So see you in the next lesson.