A quick metaphor to get us started
(If you have acquired a distaste for educational analogies you can always skip to the actual learnings right away. I get it. I’ve been on enough metaphorical boats in turbulent seas of ideas to get it.)
Imagine you’re finally building that reading nook that you’ve always wanted. You’ve got your comfy chair and reading lamp on one side, and against the other wall there’s a beautiful ceiling height bookcase. You’ve taken some time to arrange all your books and trinkets meticulously. Every shelf is perfectly balanced with a mix of books in similar sized and colors, and other decorative items like picture frames, plants, an ornate book-end, the odd scented candle. It’s beautiful.
A picture of a beautifully decorated and cosy reading nook with an orange velvet sofa and a tall wooden book case filled with books, trinkets, plants and frames all organised in a neat manner.
Glorious. Then bam, in comes your client, takes one look at it, says it looks great but he also wants to add his nine-part encyclopedia to it. You twitch for a moment, but it’s fine, it happens. That’s what being agile is all about; you’ll just have to rearrange a couple of things.
You move some trinkets to the top shelf, shuffle some books around and after a few minutes you find a nice spot for the nine-part encyclopedia. Perfect. But alas, here comes the client again, takes another look and says: “Yeah, no, not there. I want it on the middle shelf. And add in one of those planter thingies. Also there’s too many books. It feels too crowded. Remove like half of them so there’s more breathing room.”
Is the anxiety kicking in yet? Let’s talk about auto layout then.
The actual content
Handoffs in projects can be tricky. You want to make sure everything is annotated properly so the next person to work on it has an easy time pickung up where the previous colleague left off. The one thing I will always harp on with colleagues is not whether their layers are named correctly, or that every file is in the right folder. Those are things I can work around or are easily fixed.
The one thing I need is that they use auto layout whenever they work in Figma. Be it for wireframing, presentations, component libraries, whether you’re still in the initial sketching phase or already at the high fidelity mockups where the structure of a page is pretty much set in stone, I don’t care. Auto layout is going to make everyone’s life easier, in every phase of a project.
It’s going to make the difference between taking two minutes to add an element to a nav-bar, something I can often literally do in the time it take for you to explain it to me, or it taking an additional coffee break, self pep-talk and thirty minutes of frustrated groans as I manually try shuffling everything around before I give up and make the screen again from scratch, this time with auto-layout.
And this is not a UI designer exclusive. Everyone can benefit from it, because it really makes things easier for everyone involved. Others, but also yourself.
If you’re reading all this and you think, well yes, duh, of course. This isn’t new. Why is this on the internet? What other blogs did she write? “Travel containers: you don’t have to pack that full-sized conditioner”?
If that’s the case, good, awesome, we would probably have a great time working together on a project.
But I still on the very regular receive Figma files where the auto layout is severely lacking or sometimes just outright missing, where elements are Grouped together instead of neatly arranged in a Frame, where there’s a frame within a frame within a frame within a frame within a —
To those however who hear auto-layout and panic, or feel like they don’t see the benefit of including it in their Figma file, here are some rules of thumb to keep in mind.
Auto Layout: the quick and dirty basics
Adding Auto Layout to a frame
To add auto-layout to any frame, select the frame and hit Shift+A. That’s it. That’s all there is to it.
💡 Pro tip
To save on time, you don’t have to actually put all layers that you want to arrange with auto layout in a frame. You can also select all the layers you want and then hit the same Shift+A shortcut. Figma will put them in an auto layout frame for you. Peanuts.
The Auto Layout menu
Don’t panic. It looks scary at first but it’s very friendly. Let’s go over the different sections.
Resizing: Allows you to set a width and height for your frame. This can be static (fixed) or dynamic (hug or fill). Hug means the frame will resize to the size of the contents. This is only available for frames that have auto layout enabled. Fill means the frame will resize to fit the parent frame it is in. This is only possible if the currently selected frame is nested within a frame that has auto layout enabled.
💡 New
The newly added button on the right (the one that looks like a square with two arrows pointing at its corners) allows you to fix the ratio of your frame.
Direction + Gap: These two fields decide which direction your auto layout will arrange its contents. Vertically, horizontally or wrap. Wrap means the contents will be first arranged horizontally until they run out of space, after which they will continue on a new line. This setting is good for making grid-like designs.
The gap lets you decide how much space you would like between the contents (if wrap is enabled, you will have two separate fields for the horizontal and vertical gaps respectively). You can also set it to Auto, which will
💡 Pro tip
The gap can also be a negative number. You can use this to allow your layers to overlap. A common example of this is overlapping avatars in programs like Miro.
Alignment: This determines the alignment of the contents, top bottom center left right. In other words, it will determine the starting point of your auto layout.
Padding: Looks similar to the Gap field from earlier, but this allows you to determine how much space you want between the contents and the edges of the frame. You can hit the button on the right (the one that looks like a square with its corners missing) to set specific padding for top, bottom, left and right.
💡 Pro tip
if it looks like your auto layout is not respecting the padding you set, it might be because both your frame and its content have their width/height set to Fixed.
Auto Layout: the more advanced bits
Frames over groups
Frames allow for a much more dynamic and functional grouping of different components or other elements. The only instances where I myself still use groups is when I temporarily want to group elements as I’m shuffling things around, or for graphical/decorative content like static images, where the contained elements will consistently maintain the same relationship to one another. General rule of thumb: when in doubt, use frames.
Use min/max constraints to make your designs responsive
When setting elements to hug or fill, you can also add a minimum and maximum width or height. When setting your auto layout to Wrap, these settings will allow you to easily scale frames and watch how your designs fluidly adapt to the new screen sizes.
Truncate helps with keeping components in the same size
To make sure a text area maintains the same size in a clean and efficient way, you can add a truncation rule so the content will be cut off whenever it is longer than the aloted space.
Use absolute positions sparingly but efficiently
Absolute position means that a certain layer or component in your frame will ignore the auto layout. This can be useful for certain elements such as an x to close. When setting a layer to an absolute position, make sure that the Constraint properties are set correctly so that it won’t start flying all over the place when the frame changes size.
