Auto layout changed how I design in Figma. Instead of manually nudging elements whenever content changes, components grow, shrink and reflow automatically — much like real interfaces built with CSS flexbox. Once you think in auto layout, designing becomes faster and handoff becomes cleaner.
Think in stacks
Every interface is a set of nested stacks: a page contains sections, sections contain cards, cards contain rows of text and buttons. I build each level as an auto layout frame with a direction, spacing and padding. This mirrors how developers structure the same layout in code.
- Horizontal stacks for rows like buttons and icon-label pairs.
- Vertical stacks for cards, forms and sections.
- Nested stacks for complex components.
Use hug, fill and fixed intentionally
Each element can hug its content, fill available space or have a fixed size. Buttons usually hug their label; inputs fill their container; icons stay fixed. Choosing the right setting means your designs adapt correctly when content or screen size changes.
Spacing from your scale
Auto layout spacing and padding should come from your spacing scale — 4, 8, 12, 16, 24 and so on. When spacing values are consistent in Figma, they translate directly into consistent spacing in code.
“Auto layout turns static mockups into designs that behave.”
Test with real content
One of auto layout's biggest benefits is testing edge cases quickly. Paste a long name, a translated label or an extra list item and see how the design responds. Problems that would surface late in development appear immediately.
Wrap and min/max widths
Newer auto layout features like wrapping and min and max widths make responsive design even more realistic. Tag lists can wrap naturally, and cards can grow within sensible limits.
Auto layout for full pages
Auto layout isn't only for components. I build entire page sections with it: a vertical stack for the page, horizontal stacks for rows of cards and nested stacks for content inside each card. When the page is fully built this way, resizing the frame shows exactly how the layout responds, much like resizing a browser window.
This makes it easy to design for multiple breakpoints. Duplicate the desktop frame, resize it to tablet width and adjust only what needs to change — often just the direction of a few stacks or the number of columns.
- Build pages as nested vertical and horizontal stacks.
- Use fill containers for flexible widths.
- Adjust stack direction for smaller screens.
- Check behavior by resizing frames.
Common auto layout mistakes
The most common mistake is mixing auto layout with absolute positioning carelessly, which breaks responsiveness. Another is using fixed widths where fill or hug would work better, causing content to overflow when text changes. Taking a moment to choose the right resizing behavior for each element prevents these problems.
“Every fixed width is a decision. Make sure it's intentional.”
Putting it into practice
Choose a component you use frequently, like a card or a list item, and rebuild it entirely with auto layout. Define padding and gaps from your spacing scale, set resizing behavior for every child and test it with long and short content.
Once the component behaves well, rebuild one full page section using nested auto layout frames. Resize the section to tablet and mobile widths to see how it responds, and adjust stack directions where needed.
Key takeaways
- Think in nested stacks.
- Choose hug, fill or fixed deliberately.
- Use spacing values from your scale.
- Test with real and edge-case content.
Practice
Rebuild one of your existing screens entirely with auto layout. It takes time at first, but every future change becomes faster.
Auto layout is one of the most valuable skills a modern product designer can learn. It closes the gap between design and code and makes your files a joy to maintain.