Layouts, Grids & Auto Layout
Auto Layout in Figma is one of the most powerful tools for building responsive, production-ready designs. Instead of manually repositioning elements, Auto Layout lets components resize and reflow automatically based on their content.
✦ Key concept
Auto Layout mirrors how CSS Flexbox works — understanding one deeply helps you understand the other.
Think of a button: when you add more text, the frame should grow to fit. That's Auto Layout doing its job. Enable it by selecting a frame and pressing Shift + A.
Figma → CSS
Auto Layout direction: horizontal
gap: 16px /* spacing between items */
padding: 12px 20px
align-items: center