BitWithBite
UI/UX · Quick Reference
Lesson 9 — Auto Layout Cheat Sheet
In one line: Auto Layout is Figma's Flexbox equivalent — direction, spacing, and padding define how a frame resizes.
Core Settings
1Direction. Horizontal or vertical stacking.
2Spacing/gap. Consistent distance between child elements.
3Padding. Space between the frame edge and its contents.
Resizing Rules
Hug
Frame shrinks/grows to fit its content exactly
Fill
Frame expands to fill available parent space
Fixed
Frame stays a set size regardless of content
Auto Layout ≈ CSS Flexbox
direction = flex-direction
gap = gap