Figma has a new-ish feature called Auto Layout that I’ve been trying to get the hang of lately. What it does is it lets you specify how your designs will adapt once you adjust the contents inside it.

That’s a bit abstract, so here’s a more concrete example: You can automatically set the height of a button to increase or decrease depending on the length of the text within it. This can be useful for making quick changes in the copy without worrying about text overflowing. Without Auto Layout, you would have had to adjust things by hand or install a plugin to get the same results.

It very much mimics how production environments like webpages actually work. In fact, they borrow some concepts from the CSS box model to make Auto Layout:

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.

Design more, resize less, with Auto Layout

So if you’ve written CSS before, you might be familiar with some of the things that you can do in Auto Layout:

• You can make an element take up the whole width or height of its parent.
• You can specify the padding around a container and between the children nodes.
• You can make a set of elements stack either horizontally or vertically. (Just like flexbox.)

And it doesn’t just work with text. Modifying, adding, or removing any sort of node in a Frame that has Auto Layout—whether that’s text, an image, or another Frame—will change the dimensions of the design.

The downside of Auto Layout is that it’s quite different from how I’m used to designing. It’s a bit hard to master and it’s definitely frustrating for me to use sometimes. Every so often I get stuck, and I find myself falling back into the warm embrace of constraints.

And because of that, I’m finding that it’s better for me to use Auto Layout in the later stages of the design process. I feel that it ends up slowing me down a lot when I’m using it in the exploration stage.

But I hope that this changes in the future. I’d like to use Auto Layout sooner in the process so that I could take advantage of its features. But I guess that will come naturally as I become more familiar with it.

I love that we’re now able to describe behavior in UI designs, and I hope that more design tools follow this direction. I think what I’m looking forward to is how this will make playing around with real data easier. Imagine not having to worry about the design breaking because the text is too long.