Imagine yourself with a thousand tasks to complete, only to be stuck on one element that doesn't align where you want it to because who knows how you set up the autolayout. And now you're going crazy trying to fix everything.

Using Figma's autolayout feature isn't difficult. If you're struggling, don't worry. It's just a tool, use it as you want. The only way to avoid difficulties is through practice. By doing so, you'll be able to accomplish everything you do without Auto Layout, but with Auto Layout instead. This approach is far superior for many reasons.

Why Use Autolayout in Figma

The reason why you should utilize autolayout in Figma is because everything on the web is based on autolayout, except elements in absolute or fixed positions. In a responsive digital product, there's hardly a way to accomplish tasks effectively without autolayout, unless you want to set up 200 breakpoints which is definitely not the case.

Web content is responsive; it adjusts and adapts - that's the essence of autolayout. When you design on Figma, it's for the web, for apps, for digital products that need to fit various screen types. It doesn't make much sense for design to be entirely unconstrained, as then the developer won't have that freedom.

What you can achieve with autolayout

Autolayout is a key technique for creating flexible and responsive layouts. It allows you to design a page in a way that content adjusts smoothly and accurately when a section's size changes. Whenever you introduce new elements or content, the page automatically readjusts to ensure that other sections maintain a harmonious layout.

This approach also lets you arrange elements in a list, such as a row containing various cards, where each element's dimensions are automatically determined. With the autolayout panel you can adjust spaces and margins, eliminating the need to manually realign every single element whenever changes are made.

With autolayout, you promote an efficient organization and save time by eliminating constant element repositioning.

How I design with Auto Layout

I always use autolayout. As said before, it's the only way to manage a layout quickly, and I just can't do without it. On the other hand, manually positioning elements is only a source of alignment errors that I'd rather avoid.

I structure the page in the following way:

Pages

The pages have a vertical autolayout with a gap of 0, and they contain frames. Each frame represents a section of the page, from the hero to the Key Features section to the footer, and so on. The page has a fixed width because I want to view it at that size, but I could change it and everything would adapt to the variables I have set. However, that is not the focus of this post.

Sections

Each frame is a section and fills the container width, taking up all available space (full width, to be precise), and has vertical and horizontal padding that define spacing,. The autolayout is vertical here because we will be placing rows inside. The section's gap determines the spacing between the rows.

There are special section that will be out of this flow, like the header. I'll mention then later.

Rows

Starting from the rows, the auto layout becomes horizontal. Each row contains columns, so each column occupies the available space. If there is only one column, it will be full width (and theoretically we could do without it), but if there are multiple columns, they are spaced apart by a gap.

Columns

Even the columns are set in autolayout, but it really depends on the content whether to arrange them horizontally or vertically. As for the width, if I want three columns of equal width, all three will be set to fill the container. Otherwise, some will have a fixed width while the remaining ones will fill the remaining space.

Managing a layout like this can be quite challenging without the autolayout. Whenever you move one element, you end up having to rearrange everything else, which can be really cumbersome.

But why shouldn't even a simple button be in autolayout, without the fit content? Why not determine the width with padding and have a certain precision both visually and mathematically, instead of doing it manually?

Position Absolute

There are elements that can be freely placed within an organized layout.

In this case, the entire layout is in autolayout and some elements are positioned relative to others, allowing for manual alignment in the correct position.

If you need to place the elements wherever you prefer, you can use absolute positioning within that frame, ensuring they are in the correct order in the layers panel.

Header & Position Fixed

The header can either be a regular section or be positioned fixed so that it is always visible. In this case, simply add some top padding to the first section and position the fixed header at the top.

Should you always use Autolayout?

So the classic question is: can you design without autolayout? Of course, but let me tell you, if you can design with autolayout as quickly as you can without it, you're really ahead. You have the freedom to move around and not waste time manually repositioning all the elements, relying on the advantages of autolayout.

I don't agree with those who say that expert designers don't use autolayout or don't care about using it. That's not true, especially if you work in large teams where every change you make has a significant impact.

It's important to understand that design isn't always about exploration and freedom. During the exploration phase, I don't heavily rely on autolayout. I have some flexibility, but I still find it necessary because I don't want to waste time moving things around.

That's my design process, and it's not necessarily the best one. You're not obligated to use autolayout, but I highly recommend learning how to make it your own. Because here's where we need to make a distinction: Are you not using it because you don't need it, or are you not using it because you don't know how to use it correctly and struggle with it?

To overcome the last scenario, it's all about practice. Get to that point where you're not wasting time and there are no obstacles with your tool, and you'll become a master at the decision-making process.

So, should you always use Autolayout? Definitely. Will it make you a better designer? Yes, because you'll have an additional skill.Is this skill so important, so crucial, that it makes all the difference? Obviously not. You could be the most precise of designers, the pixel perfect master, but aligning objects is not exactly our job, it's just one step and we need to figure out how to make it as smooth and fast as possible.