Figma Auto Layout Finally Explained

Hosted by Christine Vallaure

Mon, Mar 9, 2026

5:00 PM UTC (45 minutes)

Virtual (Zoom)

Free to join

Invite your network

Go deeper with a course

Build real products with AI
Christine Vallaure
View syllabus

What you'll learn

A 30-Minute Figma Auto Layout Reset

In just 30 minutes, you’ll see why Auto Layout feels confusing and finally understand the structure behind it.

It’s Not Weird. It’s just based on CSS.

Auto Layout is built on Flexbox and CSS Grid. I will show you! And once you see the logic behind them, it clicks.

When Auto Layout aligns with Code — and When It Doesn’t

Figma is inspired by code but Figma is not the browser, so you need to know when to document and when to talk to dev.

Why this topic matters

Auto Layout is core to Figma and the place I see designers struggle most. It’s not about pushing elements around until they look right, it’s about understanding the structure behind it. Once you see the CSS logic it’s built on, it clicks, and your layouts and dev collaboration get much smoother.

You'll learn from

Christine Vallaure

Founder moonlearning · 2× Figma Config Speaker · Awwwards Jury Member

I’m Christine Vallaure, founder of moonlearning.io, a learning platform for UI design, Figma, and hands-on product building.

I’m a 2× Figma Config speaker (speaking on using Figma like the pros and on building and shipping products solo), the author of The Solo, a book about independent product building and an Awwwards jury member.

Teaching is a core part of my work and passion, especially at the intersection of design and code. I focus on helping designers understand how their decisions translate into real, working products.

I still build hands-on. Most of my work lives between design, code, and the tools that shape how ideas get shipped, always with a no-hype, craft-first approach.


You can find my full profile at christinevallaure.com.

Sign up to join this lesson

By continuing, you agree to Maven's Terms and Privacy Policy.