How do I set up figma and enable auto layout?

# Step 1: Get Started with Figma Basics 1. Sign up for a free Figma account at [figma.com](https://www.figma.com) if you haven't already. 2. Create a new design file (File > New Design File). 3. Draw a frame (F key) and add child elements like a rectangle (R) and text (T). 4. Select the frame or children and press **Shift + A** to add auto layout. Figma auto-detects flow (vertical or horizontal). 5. Toggle off with **Option + Shift + A** (Mac) or **Alt + Shift + A** (Windows). Explore the Auto Layout section in the right sidebar.

How do I master spacing, padding, and direction?

# Step 2: Control Layout with Spacing and Flow 1. Select an auto layout frame with multiple children. 2. Set **Direction**: Vertical (stack y-axis), Horizontal (x-axis), or enable **Wrap** for horizontal overflow. 3. Adjust **Gap between**: Enter numeric value (e.g., 12px), use arrow keys, or set to **Auto** (max space). 4. Set **Padding**: Uniform (e.g., 16px), horizontal/vertical, or individual (top/right/bottom/left). Use CSS shorthand like "12,24". 5. Drag pink handles on canvas edges to visualize/adjust padding. **Example**: Horizontal flow for button row with 8px gap.

How do I apply alignment and resizing behaviors?

# Step 3: Align and Resize Dynamically 1. In the right sidebar, use the 3x3 **Alignment** grid (W/A/S/D keys or click). - Auto gap: Limited options (e.g., left/center/right for vertical). - Fixed gap: Full 9 options. 2. Set frame/child **Resizing**: - **Hug contents**: Frame shrinks to fit (double-click edge). - **Fill container**: Stretches to fill (Option/Alt + double-click). - **Fixed**: Enter specific width/height. - **Min/Max width/height**: Bounds (e.g., ≥200px). 3. Test by changing text length—frame auto-adjusts if hugging. **Pro tip**: Parent can't hug if child fills.

How do I experiment with horizontal, vertical, and wrap flows?

# Step 4: Build Lists and Rows with Flows 1. **Vertical flow**: Stack text/icons for a card (e.g., newsfeed post). 2. **Horizontal flow**: Row of buttons; add more to test stacking. 3. Enable **Wrap** (horizontal only): Overflow to new lines (e.g., tags). - Set horizontal/vertical gaps separately. 4. Use **Shift-drag** for large nudge spacing. 5. Practice: Create a nav bar (horizontal, center align) and todo list (vertical, auto gap). Reference Figma's [Guide to Flows](https://help.figma.com/hc/en-us/articles/31289464393751).

How do I nest layouts and build a responsive card?

# Step 5: Nest for Complex Responsive Designs 1. Create nested frames: e.g., vertical outer (card), horizontal inner (header with icon+text). 2. Each nest has independent flow/padding/gap. 3. Set resizing chain: Inner hug contents, outer fill container width/hug height. 4. **Project**: Build responsive card: - Frame (vertical, hug contents, 16px padding). - Add avatar (fixed 48x48), text (fill), image (fill width). - Test resizing viewport. 5. Intro grid (beta): Set columns/rows for dashboard. Dupe and vary content to verify responsiveness.

Master Figma Auto Layout for Responsive UIs in 5 Steps

🧰

Instant Toolkit

2 artifacts

📋
Step-by-Step Guide

1

Step 1: Get Started with Figma Basics

Sign up for a free Figma account at figma.com if you haven't already.
Create a new design file (File > New Design File).
Draw a frame (F key) and add child elements like a rectangle (R) and text (T).
Select the frame or children and press Shift + A to add auto layout. Figma auto-detects flow (vertical or horizontal).
Toggle off with Option + Shift + A (Mac) or Alt + Shift + A (Windows).

Explore the Auto Layout section in the right sidebar.

Why this step matters:

-Builds foundation for dynamic designs that adapt to content changes
-Essential skill for creating flexible UI components used in prototypes

15-30 minutes

Figma (free), Web browser

$0

Definition of Done

•Successfully added and removed auto layout on a frame
•Identified Auto Layout properties in the Design panel

Common Mistakes to Avoid

❌ Selecting non-frame layers without grouping

→Use frames first or select layers to auto-create frame

❌ Ignoring keyboard shortcuts

→Practice Shift + A for quick enabling

2

Following along, or just reading? 👀

Spin up a personalized “learn Figma auto layout” plan you can save, check off, and return to anytime — unlimited on the free trial.

Start free trial →

3

4

5

🎥
Suggested Videos

A Guide to Auto Layout: Best Practices | Figma

Figma Tutorial: Master Auto Layout in 30 Minutes

Figma Auto Layout Tutorial for Beginners

Figma in 5: Auto Layout (Official)

📚
Learning Resources

📖 Online Courses

Auto Layout in Figma - From Basics to Responsive

beginner

Paid

Udemy

Figma: Using Auto Layout

beginner

Paid

LinkedIn Learning

FD4B: Auto Layout Fundamentals

beginner

Figma Learn

📖 Recommended Books

Designing in Figma: Complete Guide to Reusable Components

intermediate

by Subhro Saha

🌐 Helpful Websites

Guide to Auto Layout

documentation

Official Figma comprehensive guide with properties and examples

Use Horizontal/Vertical Flows

documentation

Detailed flows and spacing controls

Combine Auto Layout Flows

documentation

Nesting for complex UIs

🛠️ Useful Tools

Figma

Design

Free design tool powering Auto Layout

Master Figma Auto Layout for Responsive UIs in 5 Steps