As a designer, you might see yourself as something of a mad scientist, carefully mixing all of the elements of your designs to create a cohesive and visually striking whole. And like any good mad scientist, you might be a bit of a perfectionist, striving for everything to be precise and pixel-perfect. In this case, Figma’s auto layout feature can be your ultimate lab assistant and partner in crime- a way to effortlessly arrange all of the elements on your canvas without having to do it tediously by hand.
But as with any tool, there is always a learning curve. Just like a mad scientist’s first attempt at creating a Frankenstein monster might go awry, you can encounter some glitches getting the auto layout to obey you. This short guide will help you stitch your auto layout monster together without mishap.
Auto layout is a way to arrange and resize elements within a frame. You can use it to make responsive buttons that adjust to the size of their labels. It is also handy for lists that can manage added or deleted items without breaking the layout. It may also help you build universal components that adapt to different breakpoints.
To apply an auto layout, select a frame on your canvas and press Shift+A. The properties are available in the Design panel. You can control the direction, spacing, padding and distribution of elements from the Auto layout section in the right panel. You can also tweak the resizing behaviour for parent frames or even remove some objects from the auto layout flow with absolute positioning.
The spacing between objects can be a positive or a negative number. For values below 0, the child elements partially cover the adjacent items. You can visually bring the first or last piece to the front by changing the stacking.
To open the advanced auto layout settings, click on the three dots icon to expand additional options. From there, you can choose which element should be presented on top: the first or the last one in the container.
Okay, but what if you wanted to change the actual order of your layers? Make your items go from left to right instead of the other way around. Canvas stacking would be useless in this scenario because it does not affect the Layers panel.
But in fact, it is not that difficult. And you do not need to drag each layer individually to create the desired sequence. You can use rudimental transformations.
First, select the auto layout container and press Shift+H to flip it horizontally (Shift+V for a vertical flip). Instantaneously your design might look unsettling, but do not fret and trust the process. The next step is to press Enter to select all the descendant elements. Then you press Shift+H (Shift+V respectively) to flip back all the auto layout items.
Congratulations, you have just changed the list order. When you go to the Inspect panel, you will notice a new transform matrix applied to your container.
You also can apply the auto layout to components. Unfortunately, you lose some control over the size of nested elements. You might try tinkering with the padding value. However, there is another way to influence item dimensions.
Precise sizing can be achieved with the zero frame technique. Prepare two 0 x 0px squares and add a horizontal auto layout set to hug its contents. The width of this container is controlled by the spacing between its children. Duplicate this frame and rotate it 90 degrees to create a height controller. Encase it inside an auto layout wrapper. Lastly, parent the wrapper and the width controller to another auto layout frame. Now you can freely change the sizing by adjusting the spacing in your controllers.
If you want to constrain the proportions of your items, read more about fixed ratio placeholders here:
The zero frame sizing technique is extremely useful when preparing dynamic bars. There is no need to create multiple variants to mark progress states. You can build one component and only change auto layout spacing on your instances.
The auto layout works wonders combined with placeholders and the instance swap property. These two concepts make up the repeat grid technique that allows you to create ultra-flexible design systems. You would want to use it whenever you need a component with a variable number of repeating items. Think of avatar collections, form fields, dropdown options or even cards. You do not have to make separate variants for every combination.
You start with a layout block component. It is a type of placeholder that consists of variants made with auto-layout frames and base components. Each subsequent variant has one element more than the previous one. Next, you set the instance swap property on the layout block. You can also select the preferred components at this point.
With this basic setup, you can move on to building repeat grid components. Let’s say you want to prepare a filter dropdown with a variable number of options of the same kind (checkboxes or radio buttons). Place your layout block inside the dropdown and swap the base element to a checkbox. Make sure to expose nested instances on the dropdown component.
In the Design panel, specify what and how many times you want to duplicate. The layout block grants you access to the count variants and instance list to swap. The best part is that you actually change your instance structure, and nothing gets hidden in the Layers panel.
Let’s be real. We have all had moments where our designs looked like Frankenstein’s monster before we remembered to turn on the auto layout.
Overall, it is a powerful tool that can save you time and effort. You can use it to build auto-adjusting UI elements. With placeholder techniques, you also can create flexible components and optimise your design libraries.