Figma’s Auto Layout in action

Auto Layout is an amazing feature, but does it get all your design problems solved? Let’s examine some actual use cases to see where it works best.

Figma’s Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how to combine components, constraints, and Auto Layout for the best results.

I threw together a screen for an Uber Eats inspired food delivery app and I’m going to tear it down to show you how you can use Auto Layout along with constraints and components to up your design game.

Prototype in Figma Mirror. A little drizzly today, don’t mind the droplets.

Most of you already know that, but for a word of introduction, what Auto Layout does is automatically arrange elements placed inside of a frame. These elements can be either arranged vertically or horizontally and you can set the spacing between individual elements as well as between the elements and the borders of the frame. Because of this can’t use constraints or place elements on top of one another in frames that use Auto Layout.

At the top-most level, these are the four separate elements that the screen/frame is comprised of.

1. The header consists of four inner frames and uses Auto Layout. We’ll get to it later.
2. This is the headline element which is simply a left and bottom constrained text element inside a frame.
3. The content area frame is a little more complex. More on that later.
4. The bottom menu houses a top and horizontally stretched 375x1px light gray rectangle and a group of icons inside a frame that we’ll tackle a little later.

The frame for the screen is a lot longer than shown in the example above so that the much longer content area can be scrollable. The header’s and the menu’s positions are fixed when scrolling, which is one of the reasons we can’t be using Auto Layout in this frame. The sections (2) and (3) have their constraints set to align to top and stick to the left and right edges so that if the frame was to be resized, they’d stick to their initial position and also fill out the screen horizontally the way they do now.

Now let’s look at the header element. It’s comprised of another four frames and this is where Auto Layout comes into play. They’re arranged vertically and there’s no spacing between any of them or any of the borders of the frame.

1. This is the typical status icon setup in iOS. This frame contains a group of elements locked inside a frame that is set centered both horizontally and vertically. The inner frame houses a left and center constrained text element and right and center constrained vector icons.
2. This frame contains a frame that again uses Auto Layout to take care of the elements inside of it — we’ll get to it later.
3. It’s just a simple spacer element, a frame that is 1px tall with a light gray background.
4. This frame contains a left and center aligned icon and a horizontally and vertically centered text element.

Now since every frame I use in this project is a component, what this does is enable me to easily modify the content of the header element across many screens. I can now easily modify the height of all inner frames or add more inner frames.

I often use this type of structuring when designing menus. In one of the bigger projects I work on we often use popup menus with a set number of options. The master component includes all these available options, but since each child instance of the popup menu uses 3–4 options at most, I just hide all the unnecessary ones. This way I use the same component across the entire system and just hide/unhide whatever menu options I need on a given screen. This technique could be used the same way in case of the header above — you could include all types of header elements used anywhere in the app and just hide/unhide the ones you need on a given screen.

The content area frame contains cards (in the case of this particular project there are 5 cards) that are arranged vertically. The cards are 345px wide, and the horizontal padding is set to 15. That’s because I’m designing with a specific screen size in mind. I might be adding more cards, but I won’t be changing the screen’s size to anything other than 375px wide. We also needed some spacing between the cards themselves, so I set it to 32px. All cards use the same parent component whose inner elements (the image, the title etc.) I later modify accordingly.

The card element is another component that exploits the Auto Layout feature.

1. This is the image frame. In case of an app like this you could set up a bunch of image components that you could then easily switch between. You could also set these images up as styles. Check out my article on how to create a simple design system to find out how.
2. The title & delivery time frame consists of two elements — one aligned to left and center, the other one to right and center as well.
3. This Auto Laid out frame uses Auto Layout for the two tags inside that are also using Auto Layout themselves. I’ll focus on this particular element in a bit.

Now again this kind of setup enables us to modify the contents of an individual card — modify, add or remove elements from it without negatively impacting the content area. Say your stakeholders decide it’d be a good idea to place a little description for every restaurant under its name, you just add a frame that houses a text element and you’re good to go — this design change is not only automatically populated to all your screen but also arranged according to the layout you’ve decided on.

The tags use the type of Auto Layout structuring I talked about earlier. As shown above, both tags stem from the same master component. The master component contains all types of elements used in a tag. The icon (replacable) and 3 editable text elements. The visibility of these elements is then configured accordingly. This way if you decide to change the font styling, the colors or the border radius of a tag, all you need to do is modify the settings of only one component.

This is one of my favorite examples of combining Auto Layout with constraints. At the top-most level, both frames contain a center-aligned frame. The center-aligned frames use Auto Layout to arrange elements they contain and depending on what’s going on inside, how many elements there are or how big they are, they expand or contract while retaining the correct position.

There are many other way to combine Auto Layout with constraints, especially at a more complex level, where you need to accommodate for screen size changes as well as any changes inside the frames, but this short article should give you a general idea of what can be done using the features Figma provides.

Do you use Auto Layout in your designs? Would you do any of the things differently? Let me know in the comments below.