Figma Auto Layout for Beginners (Complete Tutorial 2026)

Auto layout is one of the most important features in Figma — and in this complete beginner's tutorial, we'll cover everything you need to know. We'll build a real travel app card from scratch while exploring every major concept: adding auto layout, flows, spacing, nesting, resizing, ignore auto layout, and more.

⏱️ Video chapters
00:00 Intro
00:56 Adding Auto Layout
03:59 Choosing a Flow
06:57 Spacing: Padding and Gap
13:59 Nesting Auto Layout Frames
17:10 Aligning Elements in Auto Layout
20:54 Resizing
35:07 Ignore Auto Layout
40:46 Auto Layout and Components
43:34 Auto Layout Grid
49:00 Conclusion

⭐️ Resources:
→ Figma Auto Layout guide: https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout
→ Figma: https://www.figma.com

🎓 My Design Classes
→ Watch all my Skillshare classes: https://www.skillshare.com/en/r/user/adipurdila

Use the link above to get 1 month free on Skillshare.

👋🏼 I'm Adi
I'm a passionate web designer and front-end developer with over 15 years of experience. For the past few years, I've been dedicated to sharing my knowledge through tutorials and courses.
Outside of work, I'm a big animal lover and enjoy spending time with my furry and feathery friends. 🐶🐈🐓🦆🐇
Let's learn and grow together!

💬 Let's get in touch
→ Adi Purdila Studio: https://www.adipurdila.studio
→ Hire me on Contra: https://contra.com/adipurdila/work?r=adipurdila
→ LinkedIn: https://www.linkedin.com/in/adi-purdila/

--------------------------------------------------------------------------------

Some of the links I provided may be affiliate links for products and platforms I use on a regular basis. By using these links, you support my channel, for which I am incredibly grateful.

Your support helps sustain and grow the channel, and I sincerely appreciate your awesomeness!

Видео Figma Auto Layout for Beginners (Complete Tutorial 2026) канала Adi Purdila