Master Figma Auto Layout in 10 Minutes (2022 Tutorial)

How does one master Figma auto layout in 2022? Well, in this video we’re going through it all in 10 minutes. Strap on your Figma boots and let’s go!

Figma file if you want to follow along:

Timestamps:
0:00 Intro
0:22 What is Auto Layout?
0:41 Why use Auto Layout?
1:36 Create an Auto Layout
1:46 Alignment
1:57 Item Spacing
2:08 Direction
2:18 Padding
2:39 Spacing Mode
2:56 Strokes (Inclusion vs. Exclusion)
3:24 Canvas Stacking
3:35 Text Base Alignment
3:51 Resizing
4:50 Absolute Position
5:17 My personal favourite (new) Auto Layout feature
5:58 Creating a Card with Auto Layout
9:58 Ending remarks

Music:
Upbeat Retro Pop by Infraction [No Copyright Music] — Show Me
5 MINUTES OF (No Copyright Music) CHILL LOFI HIP HOP BEAT (Royalty free)

#figma #tutorial #auto #layout

[AmeliaLeason]

I've watched dozens of videos on auto layout and this one is, by far, the best one I've watched. THANK YOU.

[emmanuelf]

I was super afraid of the making components and especially responsive. You are a really solid mentor. The way you explain, the calmness in your voice, the fluidity of the whole tutorial. A massive thank you for those crash courses !!

[ShadyNawar]

i actually watched many tutorials and they show you how to do it, but yours gave me the concept behind it and how to actually apply it as needed.. thank you and you have a new subscriber.

[capitandelespacio]

Tim "The Legend" Gabe. I hate how underrated your channel is. Your work is insightful, practical and simple.

[MrMyers]

This is by far the most simple and straightforward explanation of what auto layout is! The idea of auto layout has been kicking my butt since I’ve started learning how to use figma 2 weeks ago! thank you so much

[TimCollins]

The clearest and most concise auto layout tutorial on YouTube. Thank you!

[prafulsutar.uxd.]

You made Autolayout seem like a breeze

Tim, your teaching style is concise and on point

[madhoundes]

bounce tip, you can use X shortcut key to set spacing between or packed without going into advanced setting of Autolayout!

[КаменСтефанов-гб]

You have no idea how much this video helped me! Auto-layout is one of the most useful tools but also one of the most frustrating to understand imo

[llu]

I was literally looking for simple explanation and most videos I encountered got complicated very fast but this one is light introduction, thanks for the effort u put in :)

[okeannika]

I've watched many tutorials, but yours is the best one I've seen. Very clear and precise explanation! Thank you so much! This is just a gift!

[MarcusParry]

Literally one of the most helpful video tutorials I've ever seen. So helpful you provided the resources so we could follow along. Feel very to have a solid grasp on all you covered. Thanks!

[inigozepeda]

Came after watching Figma's official account Auto layout tutorial, and yours is 100% times better! Keep it up

[KellyEhrlich]

I’ve been looking for a way to move hinges without completely ruining my auto layouts in frames, absolute position just saved my life thank you!

[mikkun_]

First and foremost, you are an absolute teacher. I'm a front-end developer trying to design my own wireframe, this makes everything clear, it is like flex but more XD. I love how calm, and direct you teach. I don't feel anxious listening compared to other creators with banging ear rape sounds along with their fast talking shiz. Will definitely subscribe to you!

[lucas.glopes]

This class was absolute amazing! I was finding it really hard to clearly understand and apply Auto Layout on my projects before this video. Now I have finally understand it and I'm already using, and this feature is so great! Thank you Tim 👊

[awesomaa]

regretting why i didnot find ur channel before u r teaching more than the paid courses
<3 lots of love from pakistan <3

[simonswiss]

I'm a developer who's recently been deep diving into the new Figma tools (autolayout, variables, etc). Watching your series and the first HOLY CRAP moment comes from the absolute positioning" to snap out of autolayout. I did not see that little icon, so I was putting my absolutely positioned element in a different layer level, outside of auto layout. But having it collocated is so much better, especially to communicate the intent to developers. Nice one!

[eddieehi-williams]

Aside from the fact that you nailed the topic, your video quality is just wow! I am subscribing asap!

[amaridigitalmarketing]

Money tutorial, it really helped me a ton coming from XD where most of the elements are always absolute positioned and the auto layouts were driving me nuts. Thanks!!