Part 2
Figma’s Auto Layout in action
Figma has recently upgraded its Auto Layout feature and as you probably already know, it is glorious. Let me show you why.
Since the introduction of this new functionality, I’ve almost entirely moved away from using regular frames. While the Auto Layout I did an article on a while back was pretty neat, it couldn’t replace the regular frames. There are very few things that the new Auto Layout cannot do, and designing libraries of freely resizable and — mostly importantly — truly responsive elements that can be used across many different screen sizes has been brought to a whole another level.
Let’s look at a simple grocery delivery type app, how Auto Layout can be used to put its interface together.
There are some cases where setting the mainframe of a screen to Auto Layout (AL) would make sense, but most of the time you’re going to want to avoid it. Most importantly, you can’t use fixed elements in an AL frame. Another case where using AL wouldn’t be entirely feasible is when you’d have a lot of empty space, for example when displaying only a single element in a list, forcing you to use spacers or something — not a clean solution.
Save for some very specific cases, where using AL for the Main Frame makes sense, the way I like to do things (especially for mobile) is have two container frames inside the Main Frame, where one is fixed. The Main Frame is going to have to be resized manually in case you want to put more stuff in it, but having the inner container hug items is going to help you with that thanks to snapping. The Fixed Container has to retain its original dimensions, so it should have its width as well as height set to fixed. The normal container is set to fixed size horizontally and — as I’ve already mentioned — hug vertically.
The downside of using this solution is that there’s no way to have the child elements adhere to the size of their parent (main) frame, as you can’t use the fill container property unless the container (parent frame) uses AL as well. At the same time, you can only use the scale property on frames that don’t use AL.
Now, since we’re not using AL for the Main Frame and using fixed horizontal sizing for the inner frames, you could ask me, “Konrad, why don’t we save ourselves some trouble and create margins by making the container frames a little smaller and constrained to the center?”. Well, that’s entirely up to you. If you’re going to be using any elements that might be filling up the screen in its entirety at least in one axis, it’s best to only use padding on those elements that explicitly require it.
In order to have our design looking somewhat like the one above, let’s take care of the fixed frame first. In the case of this particular screen it’s comprised of 3 sub-frames. Top to bottom, the iOS Status Bar, the app’s Nav Bar and the bottom Home Indicator.
The iOS status bar I’m using comes from a kit, and if I wanted to make the items equally sized and spaced out, it’d break the entire design. Using AL is not necessary for this frame. You can just constrain the elements to left and right appropriately and then set the frame to stretch. If you’re set on going full AL, go ahead and put the elements on the left and right in two separate, non-AL frames and expand the frames while holding CMND or CTRL to fill the extreme edges of the parent frame. Now set the items to Space Around from the AL settings dropdown.
The Nav Bar is simple. It uses 32x32px icons, so all we need to do is set it to AL, then set the padding (let’s say 32px as well), and Space Around from the dropdown.
The Home Indicator only houses a single item and really doesn’t need AL, so we’re going to constrain the bar to bottom center and leave it at that.
Now what we’re going to do is try and create a structure as shown in the example above. The regular Container is empty for now, so let’s focus on the Fixed Container frame.
The items in the Layers section are ordered from the bottom up, which means that the item order of objects here will be inversely analogous to their visual order when using vertical AL. That’s why the first child element of the Fixed Container is the Home Indicator frame. The second element is the Top frame, which I haven’t told you about just yet. I want two of the frames to stick to the top and one of them to the bottom of the container.
When spaced around they’ll take up the maximum possible space in their container while spaced around evenly (as shown in the example on the left, above). That’s why we want two of the frames that are supposed to sit in the top section of the container inside another container called Top, inside which child-frames are packed with no spacing between them. Now the Top frame and the Bottom Indicator frame can be spaced around, so we always use up the maximum amount of space inside the container without having to adjust the position of child elements manually if we were to add something there.
Now that we’re done setting up the fixed container we can safely lock it, so it doesn’t interfere with the regular container frame and its contents while we’re working on them. The above example shows you what the insides of the regular container frame look like. Even though there’s a lot of elements we need two elements in it, the image that I’ve decided is going to fill the screen horizontally without any padding (even though you can’t see that, as its background is white) and a frame that for the purpose of this demo I’ve decided to name Everything Else.
So as you can see it’s all a series of AL frames, which might seem a little intimidating at first. Each frame’s role is to position its child elements in a certain way.
And so the Description houses the headline and the paragraph explaining to you in some detail what the White Dragon Fruit is all about. Just like every other frame, this one is also set up so that you can safely modify its contents without breaking the entire layout. It’s set to fill its parent frame (Everything else) horizontally and hug the contents vertically, which means it’ll get just as big as it needs to be. The headline and the paragraph text layers inside are set up exactly the same way, which is synonymous with setting their property to Auto Height.
As you move up you notice the Price & Amount frame which again breaks down into two separate frames — one for the Price and another one for the Amount. The frame is set to fill the parent frame, while its child frames are set to space around. The Price frame contains two text objects packed vertically and aligned to the right. It hugs its contents in both dimensions. The amount frame uses a different background, there’s’ 24px of space between elements, they’re packed, aligned to the center-middle (this is actually important in this case, as the text object is only 24px while the icons are 32px tall, and the padding inside the Amount frame is set to 8, 16, 8, 16 starting from the top and going clockwise.
The button is just a button, no surprises there. It is set to fill the frame horizontally and its height is fixed to 56px.
“What manner of devilry is this?” You might inquire upon noticing that the Price History AL frame has some of its elements aligned to the left, and some of them to the right. As with most things, there are at least two ways we can approach this. One is to set the alignment of everything inside the frame to right (vertical alignment is irrelevant), have the text layer (the headline) fill the frame, and set the alignment of the text inside the text layer to the left. That way the text object is right-aligned, even though it doesn’t really matter, since it’s filling up the entirety of the space anyway, but the actual text inside the text object is aligned left. You can also do this the other way around. Align everything inside the Price History AL frame to the left, set the Period frame to fill its parent frame, and set the alignment of the Period frame’s elements to the right. There’s not much to talk about when it comes to the line graph, you actually need a regular frame to construct that thing.
At the beginning of the article, I’ve mentioned that the new AL makes the frames that utilize it truly responsive, which makes it possible for them to be used across many different devices. What’s even more important than that is the fact that having your design held inside containers that automatically put spaces between makes it so much easier to deliver pixel-perfect design, where you don’t even have to worry about snapping anymore. Not only does it make your designs that much cleaner, but it also makes them much easier to update, expand, edit, etc. everywhere where components simply aren’t viable, without having to resize and move everything around when you add an icon or a menu entry.
There are many other cases where this functionality comes in handy, and there are tons of things that I haven’t covered in the article, but I’m hoping that this should set you on the right path and give you at least some idea of what can be done with Auto Layout in Figma. Good luck.
