📖 Step 3: Design - UI Components & Patterns#87 / 291
Auto Layout (Figma)
Auto Layout (Figma)
📖One-line summary
A Figma feature that auto-aligns and spaces elements.
✨Example
Auto layout arranges elements automatically
→
ABC
Horizontal layout↓
12
Vertical layout⚡Vibe coding prompt examples
>_
Build an auto-layout system using Flexbox. Implement a container that auto-adjusts arrangement based on the number of children.
>_
Implement a CSS layout that behaves like Figma's Auto Layout. Build a Stack component whose gap, padding, and alignment can be tweaked via props.
>_
Build a card whose height auto-adjusts to its content. It grows when text is long, and cards in the same row match the tallest card.
Try these prompts in your AI coding assistant!