Learn Figma Auto Layout in 30 Minutes | FREE COURSE

Figma is my favorite tool for UI design, and there are some very good reasons for that. But the main reason I use Figma is the Auto Layout feature. With it, you can group elements in a way that allows you to quickly align them, but also add spacing between and padding around those elements. You can also easily change the order of the items in that group, and you can switch from horizontal to vertical display with the click of a button.

In this course, you'll learn about:

• adding Auto Layout in Figma
• spacing, padding, and alignment
• spacing modes
• resizing with Auto Layout

OK, let's see how Auto Layout works in Figma with a simple example. We'll start by looking at how to add Auto Layout to a frame.

There are several ways to add Auto Layout. First of all, you need to have at least one element selected. In this example, I'm going to select all four boxes and then right-click > Add auto layout.

You can also use the shortcut Shift-A, or you can go to the menu and select Object > Add auto layout. When you do any of these three actions, Figma will automatically create a frame with the elements that you selected.

As you can see, they are automatically aligned and evenly spaced, and because of the original arrangement of the boxes, they are stacked vertically. It's easy to change that, though, simply by clicking the arrow buttons in the Auto layout section.

One last thing: if you move one of the elements inside the frame, it will maintain the same layout, so its position is constrained. If you want to be able to move it freely, you need to apply absolute positioning by clicking the little Absolute position button to the right of Frame in the Inspector panel.

Now, let's see how to work with spacing and padding in Figma. Let's say we have a simple menu with four menu items. Normally, it would be a bit of a pain to ensure that we have the same spacing between all the items, but Auto Layout makes it much easier. Just select them and hit Shift-A to create an auto layout, and then you can easily change the spacing in the Auto layout panel.

Now, if you add another menu item, Figma will automatically set even spacing between the items. Simple!

Here's another example, with two shapes and two pieces of text. We can easily select each pair, create an auto layout with Shift-A, and apply the same spacing between the text and shapes to keep them consistent.

We can then create a new auto layout with all four elements, and set the spacing between earnings and expenses.

This is an example of nesting frames with Auto Layout. You can see that the main frame, frame 73, also has two additional frames that each have auto layout applied. This concept of nesting becomes very powerful on larger projects.

Padding

So far, we've talked about the spacing between items, but what about the padding? To demonstrate that, let's look at a new example: a button. In this example, I've created an auto layout with text and an arrow icon. I've applied spacing of 8 px in the usual way, but this time I've also applied padding using the options below that—in this case we have 32 px horizontal padding and 16 px vertical padding.

By default, your changes will apply the same padding to both top and bottom (or left and right). But if you want to change all four sides individually, just click the little button to the right of the controls, and you can then set individual padding values for each side.

There's also a faster way to change the padding. If you hover on a frame that has auto layout and has padding applied, you will see some pink handles. Click on a handle to open up a dialog box where you can enter a value.

You can also click and drag to change the padding value dynamically. Here are some other things you can do:

• If you hold down Shift while dragging, you'll change the padding value in increments of 10.
• If you hold down Option, you'll also affect the opposing side.
• If you hold down both Option and Shift, you can change all four values at the same time.

Aligning elements in Figma is easy. Just add them to an auto layout, and then use the alignment buttons in the Auto layout panel to set the alignment. Here are some examples:

If you want to get more precise with text alignment, you can click the three dots in the Auto layout panel and choose Text baseline alignment.

Then, if you bottom-align your text with another element like an icon, the baseline of the text will line up precisely with the bottom of the icon.

If you have a shape with a stroke, you can also choose whether you want the stroke to be included or excluded in the alignment.

In the examples so far, we've been using the default distribution or spacing mode, and that's called "Packed". But that's not the only one. So now let's talk about the different spacing modes in Figma.

In this example, we have a menu, an icon, and a button. We can change the spacing mode by clicking those three dots to open the Advanced layout menu and choosing the Spacing mode from there.

Here's the difference between the two options:

• Packed will use a fixed spacing between the items.
• Space Between will use automatic spacing between the items.

So if we use Space Between, we can resize the menu, and the spacing between the items will change automatically to keep them evenly distributed.

If we use Packed, on the other hand, the space between the items will remain at the fixed values we specified.

Finally, let's look at resizing, a powerful option that allows us to control the size of the objects inside the frame and even the size of the frame itself with Auto Layout.

We have three options for both horizontal and vertical resizing, accessed in the menu shown below. They are:

1. Fixed width
2. Hug contents
3. Fill container

Fixed width is quite self-explanatory: it means that the element has a fixed width that will not change.

Hug contents, on the other hand, means that the element is only as wide as its contents—so if you type in more text, the element expands, and if you delete text, it gets smaller. That's the default setting, which we've been using so far in this course.

Fill container means that the element expands to the size of its parent container. Let's see an example of what that looks like.

In the example below, the "Logout" button is set to the default Hug contents.

But if we change the horizontal setting to Fill container, it expands to the edge of its parent container.

This can be useful when you want to resize the frame, e.g. for different screen sizes. The elements will resize automatically, while maintaining their alignment and adjusting their width to fill the container.

The Fixed width setting can also be useful in other cases. Here's an example, in which the elements are misaligned because they are set to Hug contents, and the width is different for each row.

If we set each item to be a Fixed width, on the other hand, and make sure that the widths are the same on each row, then they'll be nicely aligned again.

So that's it for Figma Auto Layout, which in my opinion is its best feature. I hope you found this course useful, that you learned something new, and that you will be using Auto Layout in your own Figma projects.

Learn More About Figma

Still hungry to learn more? Check out these video courses to take your Figma skills even further.

Or if you prefer written tutorials, try the free Figma tutorials here on Envato Tuts+. Here are some great options for you:

• 

  Introduction To Figma (Free Beginners’ Course)

  

  Adi Purdila

  14 Nov 2022
• 

  4 Ways to Resize Elements in Figma

  

  Adi Purdila

  17 Jul 2020
• 

  How to Create a Frosted Glass Effect in Figma

  

  Adi Purdila

  29 Jul 2020
• 

  4 Figma AI Updates to Elevate Your Design Workflow

  

  Janila Castañeda

  18 Oct 2023
• 

  How to Use Figma for Responsive Web Design

  

  Janila Castañeda

  14 Jun 2023
• 

  We Tested the Latest Figma Updates (Little Big Updates April 2023)

  

  Adi Purdila

  24 Apr 2023