Master Auto Layout in Figma with This Tutorial
Learn how to use Figma Auto Layout to make your design work easier. This guide is based on the latest updates from Figma Config (May 2024).
Auto Layout is a powerful tool in Figma. It lets you create frames that change automatically based on the settings you pick. You can control things like how items are spaced, aligned, and how much padding they have. This means the frame will adjust to fit its content, and the content will adjust to fit the frame.
With Auto Layout, you can add or remove items, and everything will adjust on its own. You don’t have to worry about resizing, aligning, or moving things around each time you make changes Auto Layout does it for you.
This feature not only saves time when creating layouts but also helps you keep your layers organized and your designs consistent. These are key when working on projects or with a team. That’s why it’s important to learn how to use Auto Layout.
Let’s get started!
Getting Started
To add Auto Layout to a frame or object, you can use any of these 3 methods:
- Click the “+” button in the Auto Layout section on the right panel.
- Press the SHIFT+A shortcut.
- Right-click on the selection and choose “Add Auto Layout.”
Once activated, Auto Layout will automatically adjust the frame and its content. You can also select multiple items and turn on Auto Layout. This will create a new frame with all the selected objects inside it.
By default, Auto Layout properties have set values, but you can customize them. We’ll go over each setting in detail now.
Exploring Auto Layout Properties
Direction:
The Direction property determines if your elements are arranged horizontally or vertically. If it’s set to Horizontal, the items will appear side by side. If it’s set to Vertical, the items will stack one below the other.
To change the Direction, use the arrows in the right panel as shown below.
It’s important to note that you can only set one direction at a time. If your layout requires items to be stacked in both directions, you’ll need to nest Auto Layout frames inside each other. But don’t worry about nesting just yet – we’ll cover that later.
Padding:
Padding controls the space around the edges of a frame, as well as the gap between elements inside the frame. You can set padding in two ways.
First, using Vertical and Horizontal Padding: This method requires you to enter two values. The first value sets the space for the top and bottom (Vertical Padding), while the second value sets the space for the left and right (Horizontal Padding).
Alternatively, you can use Independent Padding, which allows you to set different values for each side of the frame — top, right, bottom, and left. To enable this, click the Independent Padding icon, and four input fields will appear for you to adjust the space on each side.
Additionally, the gap between elements inside the frame can be controlled separately in the Auto Layout properties. This gap defines the space between each item inside the frame.
You can adjust both the Padding and the Gap by dragging the handles directly on the canvas, or you can input specific values in the right panel.
Spacing:
Spacing refers to the distance between elements inside a frame that has Auto Layout applied. The higher the spacing value, the more space there will be between each element. When you set a spacing value, all elements inside the frame will be evenly spaced from each other.
Just like with Padding, you can adjust the Spacing by dragging the handles directly on the canvas.
Alignment:
The Alignment property controls the position of elements within a frame. There are nine alignment options: Top Left, Top Center, Top Right, Left, Center, Right, Bottom Left, Bottom Center, and Bottom Right.
However, if the Spacing Mode is set to Space Between, the available alignment options will be limited. This is because the elements will be spaced out to fill the entire height or width of the frame. In this case, only three alignment options will be available: Top, Center, and Bottom (if the Direction is horizontal), or Left, Center, and Right (if the Direction is vertical).
Resizing:
Resizing controls the size of the elements in your design. This property applies to both the parent frames and the child components. You can set separate resizing options for the height and width of each object. To adjust this, you simply change the height and width settings in the right panel.
To help you understand how resizing works, let’s go through each resizing option step by step.
1. Fixed:
When using Fixed height or width, the size of the object remains constant, no matter the content inside it or the size of its parent frame, if there is one.
In the example below, all the objects have fixed sizes for their height and width. Notice how, when we resize one object, the sizes of the others don’t change:
This property can be applied to both parent frames and child components.
2. Hug Contents:
When using Hug Contents, the size of the frame automatically adjusts to fit its content. This means the frame will shrink or stretch to surround all the elements inside. The size of the objects, along with the spacing and padding, will be considered when calculating the frame’s size.
In the example below, the parent frame has both height and width set to Hug Contents. Notice how the frame’s dimensions change when you resize the child elements:
This option can only be applied to parent frames or text containers.
3. Fill Container:
The Fill Container resizing option makes the element stretch or shrink to fill the available space in its parent frame. When an element's height and/or width is set to Fill Container, its size becomes dynamic and adjusts to fill any remaining space in the frame.
In the example below, the elements inside the main frame have their dimensions set to Fill Container. Notice how they adjust when the size of the parent frame changes:
This option can only be applied to child elements.
Spacing Mode:
You can find advanced layout settings by clicking the “…” icon in the Auto Layout section. One of these settings is Spacing Mode, which defines how elements are arranged within the frame. You can choose between Packed and Space Between.
With Packed, elements are spaced according to the fixed value you set for the Spacing property. They will stay grouped together with the same distance between them, no matter how large or small the frame is.
With Space Between, the spacing value is ignored. Instead, elements will spread out to fill the entire width or height of the frame, depending on the direction. In this case, the space between elements will change based on the size of the frame.
If the Direction is vertical, the elements will be arranged along the y-axis, and if the Direction is horizontal, they will be arranged along the x-axis.
Strokes:
In Figma, the stroke you add to an object is not counted as part of its size. By default, strokes are ignored when setting the properties of an Auto Layout frame. This means that when you adjust Padding or Spacing, the layout will be calculated without considering any strokes added to the elements.
If you want the stroke to be included in the design, go to the Advanced Layout menu and, under the Stroke property, select Included in layout. The frame will then be adjusted to account for the space the stroke takes up. This setting only applies to Auto Layout and does not change the actual size of the objects.
Canvas Stacking:
Canvas Stacking is another option found in the Advanced Layout menu. It controls the visual order of the layers in a stack.
If you select First on top, the first layer will appear in front of the second one, and so on. If you select Last on top, the last layer will appear in front of all the others. This setting is purely visual and does not affect the actual layer order in the left panel.
Canvas Stacking can be useful when using negative Spacing, as it helps manage overlapping objects.
Text Baseline Alignment:
The last property in the Advanced settings menu is Text Baseline Alignment. When this option is active, the layout will be aligned based on the text baseline, positioning all elements relative to it. With this setting turned on, you will only have three alignment options available: Left, Center, or Right, since the baselines will always stay aligned.
Please note, this property is only available when the Direction is horizontal, and there is a text component inside the frame.
Absolute Position:
What if Auto Layout seems like the best option, but we don’t want all elements to follow the frame rules? Do we need to use a regular frame instead? Actually, you can combine Auto Layout with independent elements in the same frame using the Absolute Position feature.
When you turn on Absolute Position for an object inside an Auto Layout frame, that object will ignore all Auto Layout rules. This means you can place the object anywhere inside the frame. It won’t adjust its size or position based on the Auto Layout settings, but you can still apply regular Constraints to it.
Now it’s your turn!
Figma’s Auto Layout is a powerful tool for creating organized and scalable designs. If you’ve made it through this guide, you’re well on your way to mastering this feature and optimizing your workflow.
It’s time to apply what you’ve learned. Be creative, explore, and enjoy the process!
If you found this guide helpful, I’d love your support on social media. Stay tuned for more design tips and updates.
Thanks for reading, and happy designing!
Written by Hamad Tanveer – Product Designer focused on creating easy and useful designs.
You might also like


Writing Tips for UX Designers


Designing for Voice User Interfaces (VUI)

