Figma Auto Layout (beginner guide)

Learn Figma’s flexbox-like system for responsive design. This is the single most important skill for modern Figma work. Here’s how to do it in Figma on macOS, step by step — part of the free Figma beginner curriculum.

Lesson 4 of the Figma curriculum. Before this: Layers Panel and Selection. Next up: Components and Instances.

What you’ll do

• Select a frame and add auto layout with Shift A
• Understand Direction: Vertical, Horizontal, Grid (and Wrap for Horizontal)
• Set Spacing between items (gap) and Padding (top, right, bottom, left)
• Use the 9-point alignment grid to align children
• Understand the three resize modes per layer: Hug contents, Fill container, Fixed
• Recognize that Fill container only works if the parent has room — the parent must be Fill or Fixed, not Hug
• Remove auto layout with Option Shift A
• Try “Suggest auto layout” (Control Shift A) on a messy frame

Do it hands-free with Skilly

Reading steps is one thing; doing them while the menus are in front of you is another. Skilly is a voice-first tutor for macOS: you ask out loud — “where’s the auto panel?” — and it answers while moving your cursor to the exact button, watching your actual Figma window. It’s the same Figma curriculum these lessons come from, taught live instead of read. Free to start.

Keep going

This is one stage of the full Figma beginner curriculum. Previous: Layers Panel and Selection. Continue with Components and Instances.