The 6 Auto Layout stumbling blocks you need to understand to master this feature once and for all.

<div class="blog-post-update-to-come">🚧 Yo! I am revisiting this post after suggest auto layout was announced at Config 2024. Watch this space for updates.</div>

I've seen dozens of designers post across Twitter, Reddit, Slack, and Discord communities asking for help learning auto layout. But nearly every reply I see from other designers is an offhanded, "just practice", occasionally a more specific, "try copying a piece of interface from an app or website you like to practice."

This is not bad advice, actually, I agree that practicing is key to learning auto layout. But it can come off too general. Getting better at anything requires practice, and people generally know this. That makes those replies feel dismissive.

I haven't seen anyone take the time to talk through the core principles you need to really, truly build bone-deep confidence with auto layout.

I believe part of learning something new means not just understanding "how to do it" but also knowing what makes it frustrating.

Cooking bacon is pretty straightforward, but frustrating if you don't understand that having it slowly come up to temperature over medium/low heat will get you more even (and delicious) results than if you had started in a hot pan.

Using auto layout is pretty straightforward to: you "just" apply it to frames the same way you "just" cook the bacon. But if you can anticipate some common stumbling blocks, when and where you’ll encounter them, and how to overcome them, you'll be way less stressed about using the feature.

I’ve identified 5 of these and will walk you through each of them.

Why auto layout is so hard to learn

<h3 id="no-opinions-no-guidance">No opinions, no guidance</h3>

Anyone who has used auto layout has experienced this: you make an adjustment to your auto layout settings that causes a frame’s contents to look weird:

image.gif
An example of a swap wrinkle, where a ✂︎ placeholder instance is replaced with a ✎ content carrier

I call these "wrinkles."

I used to call them “auto layout breaks” or “bugs”, though they’re anything but! The feature is performing exactly as intended. It’s working, at least in a technical sense, but it's producing a result you don’t want (like a wrinkle in a shirt). Lucky for us, wrinkles aren’t permanent—they can be ironed out (more on that later).

For all Figma knows, wrinkles (like the one shown above) are what you want to have happen! This is because Figma has zero opinions about what you're making. There's no Clippy attempting to hold your hand, guess what you're building, and then tell you how to build it. If you design a whole mockup using only rectangles, Figma won't ask "hey, have you thought about using Frames instead?” It stays out of your way. This is great when you’ve got confidence in whatever you're executing because you can stay in the zone, in your groove, unbothered. But that confidence can slip away when you're working with a feature you’re less familiar with. It's then when Figma's lack of assistance can leave you feeling stranded. You're forced to stop designing and turn to google or youtube to look for someone else's blog post or video explaining how to solve the problem you've found yourself in.

<h3 id=”limited-feedback”>Limited feedback</h3>

You've probably seen this toast before:

image.gif
Auto layout setting toast that appears at the center-bottom of Figma's interface

This toast only fires under very specific conditions: setting a child frame to "Fill" whose parent frame, or any grandparents, are not set to "Fixed." It's the most direct feedback Figma will give you when it changes auto layout settings on your behalf. I call these "forced overrides." The issue is there are other forced overrides that Figma will make for you, but you won't be alerted to them (like with the toast above). They just happen. Suddenly one of your auto layout resizing values is changed to something else. I'll describe the other forced overrides in a bit.

My hunch is that this is huge reason folks struggle to build confidence with auto layout. If you don't understand the relationships between the settings hug, fixed, and fill, then it's nearly impossible to be aware of, let alone catch, forced overrides when they occur. The result of this is you wind up with wrinkles that seem to appear at random.

All or nothing

Once I got the hang of using auto layout, I applied it to nearly every single frame and component. I've almost never found a situation where I couldn't make auto layout work for me. I say this because I think that going all-in with this feature not only makes it more powerful, it makes it easier to use.

Only applying auto layout here and there means you restrict yourself from accessing all its benefits. Look at the example below. Starting from within, I have an auto layout frame hugging on two text objects in both directions. The text controls the width of that container <span class="figma-frame">AL Container</span>. The neighboring object to these frames is a text layer. Wrapped around both the text layer and the <span class="figma-frame">AL Container</span> frame is another frame. This set up is repeated twice, but they're not identical: the <span class="figma-frame">Regular Container</span>, the outer-most layer, is not using auto layout, and <span class="figma-frame">AL Container</span>, the other outer-most layer of the other object, is.

image.jpeg

You can see in <span class="figma-frame">Regular Container</span> the choice to not use auto layout means forgoing some settings:

  • I've lost access to the "Fill" setting for the nested <span class="figma-frame">AL Container</span> frame
  • I've lost losing the ability to use any auto layout settings on the neighboring text layer within <span class="figma-frame">Regular Container</span>.

I think folks are reluctant to go all-in with auto layout is because it does open them up to more wrinkle-risk. Remember that last section about feedback: building confidence in auto layout is a huge challenge, in large part due to limited feedback. So even if someone receives advice to "use auto layout everywhere" because that makes it easier to use, I'd be sympathetic if the reaction was, "no way dude. It's too fragile. I'll end up spending more time ironing wrinkles than I will designing."

Wrinkles are freakin terrifying, man

Of all the knobs you can turn in the design panel, auto layout's resizing rules are the one ones that can make feel like you're playing minesweeper. One wrong move and 💥 💣 🧨💥. People joke about this quite a lot:

No other adjustable thing in Figma can make a nice looking mockup turn into something that looks like it was chewed on by a pack of coyotes. This is something I think is a relatively new thing for designers. Pre-auto layout, mangling something had to be done intentionally, and usually through direct manipulation. You'd have to purposefully squash or stretch a frame. But with auto layout's resizing rules, they're abstracted away, over in the design panel. You make a new selection and suddenly your screen looks like it was hit by a truck. This adds an sense of fragility to our work. Things now feel less like putting together a collage of boxes and icons and images, and more like building a lego set with mechanized moving parts. Much more intimidating.

Okay, so we now understand why auto layout is such a tough feature to learn:

  • Figma, as a tool, has no concept of "wrinkles", and therefore can't offer us help when they crop up. We must figure out how to iron them ourselves with little to no guidance.
  • Figma only tells us about one kind of forced override via a small toast at the bottom of the canvas interface. Besides that it's on us to build the habit of glancing between the frame we're working with and the resizing rules in the design panel, asking, "did that setting change?"
  • Auto layout is more powerful when you apply it to all your frames, but this also opens you up to the risk of encountering more wrinkles. It’s a terribly sharp double-edged sword. The more auto layout frames you're dealing with, the more daunting it can be to chase down and iron out any wrinkles that occur.

The solution is to be a good scout and prepare yourself for eventual wrinkles. Study the 5 different types, know when to spot them, and know how to approach ironing them. The following list will walk you through each kind of wrinkle in detail.

5 wrinkles you will encounter and how to iron them out.

<h3 id="wrap-wrinkle">Wrap wrinkle</h3>

Have you ever applied the "wrap" setting on an auto layout frame, but the child elements aren't wrapping onto new lines no matter the width of their parent?

Child elements not wrapping

To fix this wrinkle, you need to inspect the child elements for either of the following:

  1. Set a minimum width on the children
    or
  2. Set a fixed width on the children

Which one you select depends on what kind of resizing behavior your design needs. But having a min-width or fixed value is key to get auto layout wrapping to work.

After you apply a fixed or min width, you will want to test that it worked by fiddling around with the parent frame. That's good instinct, it's good to check your work after changing something. But tread carefully here! Your QAing may accidentally cause this other common wrinkle type. More on these later.

<h3 id="swap-wrinkle">Swap wrinkle</h3>

This happens when you swap a ✂︎ placeholder with something like a ✎ content carrier or ◈ interface representative. These wrinkles usually take the form of the swapped-in instance not occupying the space within its parent frame that you expected it to (either not taking up enough space, or extending beyond the parent’s bounds). I showed an example of this type of wrinkle in the <a href="#no-opinions-no-guidance">GIF I used earlier</a> in this post. But in that case, all I had to do was increase the width of the parent frame! All the auto layout settings were indeed correct.

That’s something to note: you may think you have a wrinkle, when you don’t. Always make sure you’re doing quality assurance checks when you’re using auto layout, it’s the only way to reliable discover and iron out wrinkles before they become too gnarly.

Of all the wrinkle types, swap wrinkles have the highest chance of creating forced overrides. There's 3 critical things at play that will determine whether you wind up with a wrinkle when swapping instances:

  • The resizing rules of your ✂︎ placeholder instance's parent frame.
  • Whether or not you have auto layout applied to your ✂︎ placeholder (hint: it's good practice to have it applied)
  • The resizing rules of whatever component you are swapping in.

The resizing rules of the ✂︎ placeholder itself do not seem to matter, but it can matter whether or not your ✂︎ placeholder has auto layout applied.

<h4>How to iron out a swap wrinkle:</h4>

image.gif
GIF showing the occurrence of a swap wrinkle causing the swapped-in content to extend beyond its parent frame.
  1. First examine the auto layout resizing settings of the ✂︎ placeholder. If your swapped-in content is extending beyond the parent frame in either direction or not taking up enough space, the ✂︎ placeholder may have a resizing rule set to Fixed which ought to be Hug or Fill.
  2. If the ✂︎ placeholder's resizing settings look correct, move on to the main component of the instance you swapped in. Now, this one can be extra tricky. It might be the case that the resizing settings on that main component are already what you want for the majority of it's use cases (e.g. a button that hugs around its label), but when you swapped in an instance of the button where that ✂︎ placeholder once was, you might want it to fill all available space. Well, the good news is Figma lets us override auto layout resizing rules, so if you don't want to adjust the main component you're in luck. In cases like this you want to override those settings on the swapped-in instance.
  3. In the event that the main component's settings are what you need on the swapped-in instance, and the placeholder's resizing settings are good, move along to the ✂︎ placeholder's parent frame's resizing settings. If this frame is an instance, go to its main component for adjustments. If it's a regular frame, just start adjusting there.
  4. If you've exhausted the 3 steps above and still aren't seeing the results you expect, you could either start fresh with a new frame or instance and swap out the ✂︎ placeholder again. That, or you could adjust settings on the instances you're working with until you get the desired combination. To do this, follow the steps for a QA wrinkle.

<h3 id="qa-wrinkle">QA wrinkle</h3>

Other names for "QA" (shorthand for "quality assurance") would be

  • Pressure testing
  • Stress testing
  • Cross checking

As MDS describes in his KILLER Auto Layout Tutorial in FIGMA video, frequently QA-ing the frames you are applying auto layout to is essential if you want to reduce the number of wrinkles you encounter.

QA wrinkles are pretty straight forward both in how the occur and how they get smoothed over: they happen when you're squashing or stretching a frame or instance to check its responsiveness. But that squashing and stretching will update the resizing rules of the object you’re working with. This happens any time you manually manipulate a frame on the canvas.

I debated whether or not I'd count this as a "forced override." Right now I've landed on: it's not. It's an override that you're committing, but like forced overrides, it's not blatantly obvious that settings have changed. You have to think about it for a minute to realize "ah, of course if I drag out the edge of a frame that was set to 'hug', it's like telling the frame 'hey, your dimensions are no longer controlled by your child layers. Instead I've given you fixed numbers (width or height, depending on the edge you dragged out) that determine your dimensions."

How to iron out a QA wrinkle

The biggest thing is making sure you return to your original settings once you're done QA-ing for responsiveness. I find that once I squash and stretch something and it looks good, I use <span class="inline-code">⌘ + Z</span> to immediately undo my squashing and stretching so I can return to the settings and dimensions I know I want. You could also manually update resizing rules in the design panel.

Incompatible settings wrinkle.

Setting parent and child auto layout frames' widths to fill and hug, cancelling each other out

This is related to the earlier section where I first touched on forced overrides. I’ll quickly re-cap so you don’t have to scroll back up: incompatible settings is when you select a combination of resizing options that conflict on a logical level. Thankfully there’s only one circumstance like this: a child layer attempting to fill all available space, paired with a parent frame that wants to hug on its nested children. When you try to create this combination, Figma will commit a forced override. That forced override will mean the frame or layer in direct opposed to the one you most recently adjusted will be forced to become “fixed” in whatever direction to maintain resizing rule logic.

Remember that toast from earlier? If you see that pop up, you’ve got an incompatible settings wrinkle on your hands. Sometimes you notice the toast, but it's also easy to miss if you're designing on a large monitor or really focused and in the zone.

How to iron out an incompatible settings wrinkle

You need an additional parent frame with a fixed width. Adding this will allow you to set the frames that used to be incompatible both to fill:

  1. Starting from inner-most frames, start setting everything to hug and fill as you work your way up and outward.
  2. Once you get to the outer-most frame, use <span class="inline-code">⌘ + A</span> to wrap the frame in another auto layout frame. This one will want to have a fixed resizing setting. Then its child frame can be set to fill.

Directional wrinkles.

Example of a directional wrinkle occurring when applying auto layout to scattered objects on the canvas.

When you apply auto layout to a frame Figma does its best to correctly guess the direction the child objects should flow (vertical or horizontal). It doesn't always get this right though, especially with items arranged in a grid or asymmetrical layouts. These wrinkles are one of the easier ones to spot because they’re more obvious on the canvas: you’ll have objects lining up in a direction that looks wrong.

How to iron out a directional wrinkle

Simply change the direction! You've only got three choices: horizontal, vertical, or wrapping.

Space between wrinkle

Example of a space between wrinkle occurring by accidentally dragging the pink handles on the canvas.

This happens when you have the "space between" property set to "auto" or "space between" and override it (sometimes accidentally) by clicking or adding in a fixed value. This wrinkle takes more effort to commit, but can also easily go unnoticed, especially if you’re working fast.

How to iron out a space between wrinkle

This fix isn’t fancy or glamorous, it’s simply correcting the value of the space between property in the design panel. The real party trick ‍is noticing the wrinkle in the first place.

That’s why doing micro QA while you build with auto layout is so so crucial. Until I write a post about it, the best (and briefest) tutorial I’ve seen is one I already mentioned earlier: MDS’s KILLER Auto Layout Tutorial in FIGMA video on youtube is really good. He explains the relationships between the resizing settings well, and also demos a really reliable build process that I’d encourage anyone to adopt and follow. It’s the same method I use: start with the tiniest pieces, and as if you’re growing a tree, add new layers to the exterior (memorize that <span class="inline-code">⌘ + A</span> shortcut), building up over time.

<h2 id="change-log">Change log</h2>

  • Current version
    • Added a "heads up" banner about how I will be updating this post to account for the suggest changes feature announced at Config 2024.
    • Improved the introduction of the post.
    • Updated the directional wrinkle section to include the "wrap" option.
  • May 4, 2024
    Added a section about a 6th type of wrinkle (wrap wrinkles).
  • November 19, 2022
    First publication.