Figma Auto Layout
Figma is listening to the design community and just keeps on growing. The tool’s Auto Layout feature is out, meaning that:
- 💎 Buttons resize with their text
- 💫 Lists rearrange themselves when items are moved around
- 🌈 Elements are nested to respond to their content
Before and After
This gif from Tony demonstrates just how much time Autolayout can save you. Here, he compares the old way with the new way:
How it’s made
Autolayout is a very useful feature, and a many design and enginerring decisions must have been made to get this working. Sho Kuwamoto, Director of Product Design at Figma, explains why items in an Autolayout frame go backwards:
First, let’s talk about fundamentals. For most people, auto layout is going to allow you to design elements that contain text without having to redesign them when the text changes. The first use most of us will have for this feature are dynamically resizing buttons, as seen in this great tweet: As the length of the text increases, so does the other elements in the button.
Objects can resize frames, but frames can’t resize these objects. 🚨 Disclaimer: This article covers the state of the feature as of December 2019. It’s probable that the shortcomings explained here will be addressed in the near-term. Hopefully 🙏 “When you add Auto Layout to a frame, the items inside are stacked next to each other (either vertically or horizontally).