We’re happy to announce that Auto Layout is now live in Figma!
Buttons can resize with their text. Lists can rearrange themselves when items are moved around. And elements can be nested to create complex interfaces which respond to their content.
Building Auto Layout has been a fun but long journey for us. It’s something we’ve wanted to do for a while, but it took quite a few design iterations for it to feel right.
The challenge of bringing design and development together
At its heart, Figma is a design tool. It enables free-form exploration using core concepts like paths, layers, and groups. But this free-form nature can lead to lots of repetitive work. For example, a seemingly simple update to button text takes far too many steps—edit text, resize button, move adjacent button, and so on.
Meanwhile, production environments like HTML/CSS and SwiftUI are much better at describing the structure of a UI and the relationships between objects—which makes changing things like button copy far less painstaking. However, free-form design exploration is near impossible in these environments.
So in building our Auto Layout feature, we wanted to marry these two worlds. How do we combine the ease of making edits in production while preserving the free-form nature of Figma?
Like many design challenges, the end result may look obvious in hindsight. After trying many different approaches, including some rather non-conventional ones, we felt the best way to marry the two worlds was to add a few core concepts from the CSS box model (specifically flexbox) directly into Figma. And by introducing Auto Layout as a property, you have the flexibility and power to apply Auto Layout to any frame, whether it’s in a component or not.
How Auto Layout works
When you add Auto Layout to a frame, the items inside are stacked next to each other (either vertically or horizontally). The frame’s size is then determined by the total size of the items within it. Auto Layout frames can have their own padding, fill, stroke and corner radius, so you can create buttons without adding additional layers.
This makes last minute requests like tweaking button copy from “Buy” to “Add to basket” a breeze. As you edit the text, the frame resizes automatically. And if you stack some buttons next to each other, they all move as you would expect. (Note: the one difference from the CSS model is that spacing between items is done at a container level. If you need to adjust the spacing between individual items, you will need to do a little bit of extra work.)