Figma Auto Layout: A Game-Changer

I stumbled upon this old draft I wrote back in April 2022. Crazy to think it’s been over two years! I remember planning to publish it then, but life happens, right? Just like Harry Kane, sometimes the big wins take a while. Better late than never, they say.

Remember when Figma dropped auto layout back in 2019? I was hyped! I thought, “Man, this is gonna change everything!” And it kinda did.

No more messing around with resizing elements and stuff. The feature was like magic. Just plop your stuff down, and it magically adjusts itself. It’s like having a personal assistant for your designs!

Sure, some might think the auto layout is overkill for simple components. But trust me, once you dive in, you’ll see why it’s a game-changer. Let’s break down why.

Problem: The non-existent values

The easiest way to create a component like a simple button is by creating the container and the content (let's put an icon and a text there). So we have three objects in the same hierarchy/layer level and arrange the layout to make it look like a button. Sure, there’s a white space between the container and the content, and it also has white space between the icon and the text.

Once we have the button design in Figma, it’s crucial for developers to understand the precise spacing between elements. They can either reference a detailed style guide with exact measurements (needs extra design effort) or inspect the button directly in Figma, like this:

To ensure accurate spacing, we can inspect the button in Figma and observe the following values: padding-top and padding-bottom are 6px, padding-left is 8px, and padding-right is 12px. Additionally, the gap between the icon and text is 8px.

While the resulting layout may appear correct, the spacing between elements is not explicitly defined in the code structure. Those are determined by the relative positioning and properties of the container, icon, and text within the layout. It’s only the distance between one object to another.

So, is it possible to make the padding-left identified as a real padding-left in the code structure? Yes, and the auto layout feature is the answer.

Solution: Make it with auto layout

When you whip up a button with auto layout, you’ll notice a distinct structure: the icon and text are snuggled inside a container. This is how developers will build it in real life. It’s like a little family, with the container as the parent and the icon and text as its kids.

You’ll see that the spacing values are identified as padding (the pink one) and gap spacing (the blue one). You can compare them with the previous GIF. It is also reflected in the Inspect section in the right sidebar (It’s 2024 and it’s already moved to the Dev Mode I guess :’D) so we can see the working code there.

So, we don’t even need a style guide with lines and numbers to show the white space value anymore if we want to.

A more advanced use case

While auto layout may seem overkill for simple components, its true power lies in handling more complex layouts. Example: a component with an icon in a container (usually used to maintain the 1:1 ratio for non-square ration icon shape), and content consists of a title and subtitle stacked vertically with a gap white space between them.

This is how inspecting the component looks like if we don’t utilize the auto layout:

And this is if we utilize it:

First, we’ll see the distinct structures for both designs. Even if we design it with the non-auto layout approach, the developer needs to structure it anyway following the HTML structure which sometimes implements a non-proper approach and causes scalability issues for future adjustment.

By implementing a proper design structure using auto layout, we can mitigate future risks and costs associated with scalability issues.

We nailed it! The design and code are basically twins. No more translation errors or miscommunications. It’s like magic!

Advanced scalability

Let’s make the game more interesting. What if we want to make the height of the component higher, keep the icon in the center, and the text stick to the bottom of the component? Or what if we also want to create a second scenario like this one on the right:

How do we hand over these scenarios to the developer? With an explanation and description on the Figma file? Or create an animation or a video so the developer understands what we want to achieve?

Simply create the component using auto layout, and let developers experiment with different layouts. Auto layout’s flexibility will allow them to easily adapt the component to their specific needs.

We can eliminate the need for detailed explanations and descriptions in the Figma file. The settings within the auto layout clearly convey the intended implementation, making it easy for developers to understand and replicate the design.

Isn’t it fantastic? This feature makes handing over designs to developers isn’t as difficult as explaining why Muse’s latest album, Will Of The People, didn’t win (even nominated!) a Grammy for Best Rock Album as The Resistance and Drones did.

You can see the example of the code implementation by checking this CodePen page out.

EXAMPLE CODE PEN - “Example of the implementation.”

And for all the component designs I put in this article, you can see the Figma design file and play along with them in this Figma Community file on the page ‘Example for Medium Article’.

Limitation

So we learned that utilizing the auto layout would make a well-structured design to hand over to the developer. But, does it solve all problems? Do we really don’t need to put any explanation because the feature is enough to cover all the needs? It depends on the context.

Because sometimes we’re facing something we can’t control. For example, dealing with a developer who doesn’t care much about the scalable structure even if we already provide the best we can do. If you face this badly, I have one solution: call Professor X to put the things in their mind 😂 (and hope they don’t have Magneto’s helmet!)

The limitation that the current auto layout feature doesn’t have (at least until this article is written), is responsiveness. It doesn’t provide settings for two or more objects side by side horizontally to be stacked on a particular size, like what we need when designing the layout for the desktop and the mobile version.

But, I believe the Figma team is working on this obvious need, and let's see what’s coming next.

And by the way, those two paragraphs above are the original in 2022. Now, they have this:

Amazing 😆

TL;DR

The auto layout feature utilization will help the developer with a proper design structure, identify white space values, and some flexbox settings to increase the handover efficiency.

A tidier design file, a more accurate implementation. Then designers and engineers can happily live together forever.

Originally published on medium.com