2.1 What Is Auto Layout in Figma?

Hello and welcome to lesson number one. So, what is this new wondrous feature in Figma that everyone is talking about? Well, it's called auto layout, and it's applicable to frames. The way it works is very simple. When you apply auto layout to a frame, all the items that are nested in that frame are stacked next to each other, either horizontally or vertically. And the total size of the parent frame is determined by the total size of these items. Now the cool thing about frames with auto layout is that you can apply padding to them, and it can also set distance, the distance between these nested items. So let's jump into Figma and see this in action. I have a very simple document set up here in Figma with a couple of circles, and there are multiple ways to create or to add auto layout to a frame. The easiest one is to select the parent frame and go in the inspector here and click on Auto Layout. So this, depending on the arrangement of the items, creates either a horizontal or a vertical orientation, we'll talk more about this in the upcoming lessons. It also adds horizontal padding, vertical padding and spacing between items. Now the nice thing about this is that I can change these values, like so, and the frame, the parent frame, will be automatically resized according to that. Now, just in case this wasn't clear enough, let's back up and show you a different example. So I'm gonna take these shapes and I'm gonna align them like so. All of them on the same line. So then I'm gonna take my frame, hit Auto Layout, and you can see the items are now distributed evenly, and the values for the padding are changed compared to our previous example. So as you can see when adding Auto Layout, Figma does some calculations automatically, and it creates a frame with Auto Layout based on how those nested items are displayed initially. If I change things up a little bit, so for example I may stack these vertically, and I do the same thing. Auto layout is now set as vertical, but I can always change it to horizontal, like this. That's pretty cool, right? And then I can go in here, I can say okay, I want 100% or 100 pixel lateral padding, which means we now have 100 pixels here, 100 pixels here. And I can also do maybe 50 pixels on top and bottom. So now you'll see that we have 50 pixels of padding on the top and on the bottom. And I can also change the distance between items. Here's how it looks like with 50. And Figma does these calculations automatically, which is fantastic. Now, another way to create an auto layout is to grab a few existing items and then you can right-click on them and hit Add Auto Layout or you can use the shortcut Shift+A. So by doing this, you're basically creating a new frame that contains all of these elements as nested children, and it's the exact same thing. Depending on the position of those elements, it's gonna create either a horizontal or a vertical layout, and set the correct paddings and distance between items. All right then, that's a quick demo of working with auto layout. Now, let's see how we can work with items that are stacked horizontally. That's coming up in the next lesson.