📖 Notes
LESSON 9 OF 26
Auto Layout — Responsive Design in Figma
Frames That Resize Themselves
Auto layout makes frames resize automatically. Build responsive components that adapt to content, similar to Flexbox in CSS.
Auto Layout Properties
Direction, Spacing, Padding, Resizing
↔️
Direction
Horizontal or vertical stacking of child elements — Figma's equivalent of flex-direction.
📏
Spacing (Gap)
Consistent space between items, ideally an 8px-system value.
🔲
Padding
Space inside the frame around its children.
📐
Resizing Rules
Hug contents, Fill container, or Fixed size — controls how a frame reacts to its content or parent.
💡
Auto layout ≈ Flexbox
If you've used CSS Flexbox, Auto Layout will feel immediately familiar — direction, gap, and padding map almost one-to-one to flex-direction, gap, and padding in code.