Skip to content

Grow, shrink and reflow elements with Figma Auto Layout

Let’s build a quick prototype, literally just a few buttons. One rectangle, a bit of text and the button is ready. Easy-peasy!

Button design in Figma

Let’s group it using ⌘ + G keyboard shortcut and duplicate multiple times using ⌘ + D combination. Let’s go!

Multiple buttons in Figma

What’s the point of having a prototype with the same buttons? Let’s change the text inside them to reflect prototype requirements.

Multiple buttons with incorrect padding around them in Figma

What just happened here?! After changing text, the rectangle didn’t adjust its size to reflect the text length. There’s no chance that I’m going to do it manually! That seems like a tedious task for a few buttons, so imagine doing this with hundreds of them.

Now my UI designer career is over, and I am going back to coding!

Wait a sec bro! There is hope.

Grow, shrink and reflow elements with Figma Auto Layout #

Figma Auto Layout is a game-changer. It lets you dynamically grow, shrink and reflow frames. Adjust the size of a button based on a text length — no problem! Reflow elements when new items are added to the list — easy! Let’s recreate my prototype using this feature.

Button design using Auto Layout in Figma

Text is all we need for now. Let’s wrap it with an auto layout frame by clicking “Add auto layout” from the contextual menu or using keyboard shortcut ⇧ + A. The element is now wrapped in a fully customizable auto-layout frame. We can add a background colour and padding to it. Adding padding follows the same rules as the CSS paddin property. In my case, it is 10 20 that corresponds to 10px on the vertical axis and 20px on the horizontal one. Nice!

Button design using Auto Layout in Figma

Time to duplicate the button instance and adjust the inner text. Look!

Button design using Auto Layout in Figma

This is pretty magical, and now I can carry on my UI designer journey. There’s a lot more to it, let me show you a little bit about what you can achieve with Auto Layout in Figma.

Auto-placement and reflow #

If you wrap multiple elements into an auto-layout frame, you can delegate auto-placement of elements to Figma. You can control the spacing between elements in “Spacing between elements” in “Auto Layout” section on the sidebar. You can also control the direction of auto-placement. The most mind-blowing feature is the ability to reorder elements using drag & drop or using arrows on the keyboard.

Auto-placement and reflow of auto layout frames in Figma

That’s it for today. If you think this isn’t cool, I don’t know what is. Hopefully, you found it helpful and exciting. Until next time, stay creative 👋

comments powered by Disqus