📖 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!