This lesson is pulled from my course The Art of Visual Design (Elizabeth’s Version).
Please spend the time to understand auto layout! Using auto layout will help you iterate quickly on your designs and save you time in the future. It seems scary at first, but once you finish this tutorial, you’ll be ready to tackle any auto layout challenge.
→ You can follow along using this accompanying Figma worksheet.
What is auto layout?
Auto layout is a property you can add to any frame that makes it easy to create flexible horizontal and vertical layouts. It’s useful for creating a design that needs to shrink or grow depending on its contents.
A common use case for auto layout is buttons. When auto layout is not applied, the button size stays fixed. If you want to resize the button, you have to resize the frame and manually check that the spacing around the text remains the same.
When auto layout is applied, the button grows and shrinks according to the text within. Take a look at how the padding around the button stays consistent.
You can also use auto layout to build a card that flexes to different screen sizes. Some elements can have a fixed width while other elements can stretch. Elements can even wrap to a new line!
When auto layout is applied to a list of cards, the cards move down depending on the length of the content:
The last example I’ll share is global navigation. When you’re iterating on global navigation, you’ll often need to try multiple configurations: horizontal vs. vertical or centered vs. left-aligned. Using auto layout allows you to iterate quickly on these different layouts. Here are some examples of navigations you can create by adjusting auto layout alone:
So… when should I use auto layout? Almost always! In most situations with horizontal or vertical spacing, using auto layout is standard. It’ll allow you to iterate quickly and scale your designs.
✨ P.S. If you’re familiar with CSS, it works the same way as Flexbox.
How does it work?
Here’s a deep dive on how auto layout works. You can apply auto layout to any frame, group, or selection with Shift-A. When you add auto layout, a new section appears in the Design panel:
If you want to remove auto layout from your selection, you can press the - button in the panel or press Opt-Shift-A or Alt-Shift-A.
1. Layout options
When you apply auto layout, the top-level children* in your selection will ✨ magically ✨ move in one of 3 ways:
- ⬇️ Vertical: The children will stack on top of each other.
- ➡️ Horizontal: The children will sit next to each other in a row.
- ↩️ Wrap: The children will wrap depending on the size of the container.
Depending on where the elements are, auto layout will try to predict which layout you want.
When you add auto layout, the icon changes in the Layers panel.
*A quick note on children
If I add auto layout to frame (1) in the image below, layers a, b, c, and d will all be affected by auto layout. However, frames (i) and (ii) will not be affected because they are within another grouping.
2. Children sizing options
Each child within your auto layout frame has 3 sizing options for the width and height. When you select a child, you’ll see these options in the Design panel.
Depending on what you’re trying to do, you’ll likely have to adjust these settings for individual elements. The sizing mode for width and height are set separately.
- Fixed: The child’s size will not change when the size of the parent changes.
- Hug contents: The child’s size depends on its contents.
- Fill container: The child’s size will flex to fill the size of the parent.
In the examples below, I’ve set the width and height to have the same option, but remember you can adjust them separately. For hug, notice how the yellow background (the parent) stretches as I add or subtract squares (its children).
3. Padding & spacing
These are settings you adjust at the parent-level.
Padding
All auto layout frames have padding. Padding is the space between the children and the auto layout parent frame. If you’re familiar with CSS, it works the same way!
Padding is really useful for things like common components like cards, form inputs, and buttons:
When you change the text within the button, the padding stays consistent.
Spacing between children
If there are multiple children within an auto layout parent, you can adjust the spacing between them. The spacing will be the ✨ same ✨ between every child.
Fixed spacing is when you set a specific distance. (This is similar to how gap works with flexbox.)
Auto is when the spacing is evenly distributed, so that the children fill the parent container. (This is the similar to setting the parent to space-between in flexbox.)
4. Positioning
Finally, there’s positioning. This determines where the children sit within the parent. You will only see a visible difference when the parent has a fixed width or height. Oftentimes, you don’t have to touch this setting.
The following parent (the purple square) has the following settings:
- Layout: Vertical
- Width: Fixed
- Height: Fixed
- Spacing: 8px
Notice how the children move within the parent.
Adjusting the position also works when the parent’s spacing is set to auto.
5. Nesting auto layout frames
You can nest auto layout frames within auto layout frames. This is when auto layout can get really powerful. The key thing to remember here is that you should create a new auto layout frame every time you need to…
- change the spacing between 2+ elements.
- change the layout direction between 2+ elements.
The following example has 5 auto layout frames. Can you identify them all?
Here’s the solution! Notice how there are 4 auto layout groupings within the primary group (1). Groups (1), (4), & (5) are horizontal layouts and Groups (2) & (3) are vertical layouts.
The best way to learn auto layout is to practice! In the next section, we’ll put all these principles into practice.
Common troubleshooting
The objects are not spaced in the way I expected them to.
Make sure all the elements are grouped properly within your auto layout parent. In the example, below, notice how the explore icon and Explore text are too far apart. That’s because each element is considered a top-level child of the parent container.
I don’t see the Fill container option.
Fill container will only appear if you have a child selected. The top-level auto layout parent will not have the fill container option because there’s nothing to fill into 😲
Fill container isn’t working!
Check to make sure that all nested elements are set to Fill container. All elements within a parent need to be set to Fill container in order for it to work.