<div class="blog-post-update-to-come">⚠️ Heads up! This blog post needs a refresh after everything that was announced at Config 2023. The information in this post is still good, but I am re-writing it to include the latest feature announcements. I've published a separate blog post covering the general changes I need to make to this post and some others. If you'd like to be notified when I publish a new version of this post you can sign up for updates by joining my newsletter.</div>
I've seen dozens of posts across Twitter, Reddit, and in Slack and Discord communities from designers who are new to the field or new to Figma asking for help learning auto layout. Nearly every reply I see 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 when this is the extent of the advice it can come off too general (getting better at anything requires practice, and people generally know this) and that can feel dismissive. I've yet to see mentions the core principles you need to get your head around to really, truly build bone-deep confidence with this feature. To do that, you need to understand the stumbling blocks you can expect to run into when using auto layout, know where you’ll encounter them, and how to overcome them. I’ve identified 5 of these and will walk you through each of them.
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:
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.
You've probably seen this toast before:
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.
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.
You can see in <span class="figma-frame">Regular Container</span> the choice to not use auto layout means forgoing some settings:
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."
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:
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.
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 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>
Other names for "QA" (shorthand for "quality assurance") would be
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."
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.
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.
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:
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.
Simply change the direction! You've only got two choices: horizontal, or vertical.
If you find yourself saying “well, I kind of need both horizontal and vertical,” then the fix is to add more auto layout frames so you can choose to stack things in either rows or columns. Unless I’m building a literal table component, I tend to work in rows. Objects within the rows will run horizontally, but the rows themselves also get wrapped in an auto layout frame, which runs vertically.
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.
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.
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. Readers get extra insight behind every post.
