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!
Subscribe to my channel here: / @timgabe
Figma file if you want to follow along:
www.figma.com/file/n7tE1dUjEZ...
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

[@prafulsutar.uxd.]

You made Autolayout seem like a breeze Tim, your teaching style is concise and on point

[@ilyahakobyan6432]

I've watched a lot of people do tutorials but yours are the best I've seen, very calm, great visual representations, to the point and just professional. Thank you for your efforts!

[@TimGabe]

that's so nice to hear, Ilya. I do my best to create good content, so it really makes me happy to read comments like these. thank you!! 🙏

[@tharindumarapana6670]

Agree. he has no hurry and explains well.

[@AnjaliKumari-sg1hh]

you have no idea, how much your video helped me. nobody taught autolayout like you did. Thanks a lot. ❤

[@TimGabe]

that really means a lot, Anjali 🙏 thank you so much for the kind comment 💜☺️

[@madhoundes]

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

[@TimGabe]

that’s a great tip, Ahmad! thanks a lot for sharing 🤩

[@RobbSnor]

That's actually a golden tip!

[@TheMojojojoism]

It could be a great tip if I knew what's the X shortcut key is...

[@alirae7148]

@@RobbSnor explain?

[@PrajyotMeshram]

@@TheMojojojoism same... still not able to figure it out

[@clavafortuna]

Wow. was going in thinking it was going to be hard to learn auto layout, but you made it so easy and straight to the point. Subbed for sure, thanks man!

[@TimCollins]

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

[@TimGabe]

really appreciate it, Tim 🙏🙏

[@MrMyers1489]

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

[@TimGabe]

it's amazing to hear that my first ever tutorial still resonates with people! thank you!!

[@heloisaguarda7509]

I've watched a bunch of Auto layout videos, but none of them was as simple to understand as yours. Thank you for that!

[@TimGabe]

that’s just great to hear, Heloisa 😃 thank you for leaving a comment and showing your appreciation ☺️🙏

[@flawless1979]

Keep up the great work! One of the best channels I have seen. You explain it very well without going too slow.

[@TimGabe]

that makes me so glad, Michael!! 🙏 Thanks a lot! 😃

[@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.

[@blazhespireski2259]

Thanks man, I can see the effort and hard work you've put in this video. Keep up the great work!

[@TimGabe]

appreciate you noticing that, Blazhe. thanks a lot for adding a comment to express it! 🤩

[@aishaumoru3004]

You just gave me exactly what I was looking for🤗 Thank you very much for this video

[@TimGabe]

genuinely happy that I could help, Aisha 🤩🙏 thank you for this comment!!

[@rajaarunachalam8550]

I love the way you explained. Hats off bro. Keep it up. I expect advanced tutorials from you.

[@TimGabe]

makes me so glad to hear that you liked the video, Raja. 🤩 my ambition is to cover everything from more beginner type content to really advanced things, but always with the goal of keeping it simple 👌🥳

[@infinitedesigns_io]

Very cool video! The way you explained that auto layout was basically flex for Figma made so much sense to me. Thank you!

[@TimGabe]

Adam!! So happy to hear that you liked the comparison, wasn’t sure it was going to be helpful 😅 Thank you so much for supporting!! 🤩

[@mcanselek3054]

thanks! this is the video which i was looking for a loooong time!

[@iva5888]

Your videos are amazing. Short and detailed. Thanks Tim

[@TimGabe]

super happy to hear it, Iva! thanks for letting me know by commenting 🥳

[@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!

[@TimGabe]

wooow… Marcus, what can I say other than thank you so so much for this super kind comment. really appreciate you taking your time to write this 🙏😃

[@gabypino407]

Thanks Tim. Love how easily you explain things.

[@TimGabe]

happy that it resonated, Gaby! 🤩

[@emmanuelf4917]

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 !!

[@yaltharullist9181]

Super helpful to understand Auto Layout in Figma even better, thanks dude!

[@TimGabe]

happy to help Yaltha!! 🥳🙌

[@irinachiriliuc6468]

Great explanation of an auto layout! Thanks for your content!

[@sivaprasad2020]

One of the simplest and clearest explanation of autolayout feature of Figma. Thanks Tim. Really appreciate. I am following you for all your videos.

[@TimGabe]

thank you, Sivaprasad 🤩🙏 comments like this really makes me so excited to continue improving and making even better videos for you all!

[@capitandelespacio]

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

[@dubravkaneskovic4425]

This is the best video on this topic, so well put together! Thanks

[@TimGabe]

comments like these... thank you Dubravka! I know that the competition is fierce, so this really means a lot 🙏😃

[@ricardogarcia5629]

Thanks for the content Tim! Really professional and clear! Keep going!

[@TimGabe]

thanks a lot Ricardo!!

[@aditik4681]

This was mega helpful in refining existing practices. Thank you :D

[@TimGabe]

awesome to hear, Aditi!!

[@hanamiller]

Thank you for explaining this so well! Every other video I watched on this just left me with more questions than answers.

[@TimGabe]

I'm really happy it helped you!!

[@learnwithaasim]

Wow man, this video is so helpful. Understood auto layout well🔥

[@TimGabe]

happy to hear it, Asim! 🤩

[@llu2736]

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 :)

[@TimGabe]

that’s amazing feedback, thank you so much. I’m always trying to keep things as simple as possible, but I will make this an even bigger focus in all of my videos from now on 😃🙏

[@user-fx9ix5zz9p]

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

[@TimGabe]

that's so nice to hear, Kamen 🥳 thank you for leaving a comment, my friend!

[@eddieehi-williams2824]

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

[@TimGabe]

Eddie, this means more than you think!! thanks a lot, man 🤩🙏

[@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!

[@TimGabe]

that's so nice to hear. thank you!!

[@rehamjarah2638]

Thank you for explaining this thoroughly!

[@TimGabe]

a big thanks right back at you Reham for showing your support and commenting!! 😃🙏

[@UmairUlhaque]

Hi Tim, I was just refreshing my practices while working with the auto layout, I always appreciate how you keep things simple, and the way you deliver the knowledge. 👍

[@TimGabe]

glad you liked it, umair. appreciate the comment!!

[@jhonrahmat6075]

this is so good, now i understand a little about auto layout, thanks appreciate the content

[@TimGabe]

thanks a lot for commenting and supporting, Jhon! 😃

[@timepiecevideos]

Thank you for putting in the time to teach others.

[@TimGabe]

excited that I can be of help! 🥳

[@shamulipore3830]

Thank you thank you thank you so so much.. this video is so much better than hundreds of other auto layout videos i watched earlier. my concepts are super clear after watching this video of yours. Just subscribed to your channel.

[@TimGabe]

comments like these are so energizing and awesome, thank you so much for sharing this with me Shamuli. happy to have you as a subscriber! ☺️💜

[@deliciouspizza4405]

Thank you very much for the video and your figma file! ❣

[@TimGabe]

happy to help! hope you liked it, my friend ☺️🙌

[@PaulStoppable]

Awesome videos, Tim

[@Abdulhameid]

I am providing a UX design tutorial for a big company and I will use your template and ... I included your channel as a reference on the Figma file to give you a credit ... You are a great teacher ... Keep it up ... Consistency is what would makes the difference!

[@TimGabe]

really really appreciate this, Abdulhameid 🙏 have a great day/night, my friend 🤩

[@ricardomarques2334]

This is just amazing. Thanks for sharing!

[@TimGabe]

happy to share my knowledge, ricardo!

[@creatoratplay]

Just watched this again. Super helpful!

[@TimGabe]

delighted to hear that you liked it 🥳

[@begumagun]

Thanks Tim! It is really good video which helps me a looooooott!

[@gstephanie5944]

Thank you so much for explaining the logic behind creating responsive design.

[@TimGabe]

and thank you so much for commenting ☺️🎉

[@user-id5cs4rb5o]

Thanks for the upload! Great information

[@beejayarts]

Great tutorial here, thanks for the refresher. Definitely subscribed too. I have felt your impact from a faraway Nigerian town.

[@TimGabe]

I’m truly grateful and humbled that I can reach people all over the globe 😃 thank you so much for the kind comment and the subscribe, Beejay!!

[@triciasada5383]

thank you so much for making these easy to use tutorials :)

[@TimGabe]

happy to be creating content that resonates 🤩

[@amiraeltagy2101]

Thanks for the very detailed tutorial. It helped me a lot!

[@TimGabe]

happy to hear it, my friend!

[@therocket6923]

i love how you explain .... is good and look easy to follow .

[@TimGabe]

so happy to hear that you found it valuable, my friend 😃🙏

[@imeuboh7739]

Thanks for the explanation, I was having problem with the fixed container and fill container and fixed width, but ur video makes the difference clear, am following you for other updates. Thanks again

[@TimGabe]

that’s so nice to hear, Ime ☺️ thank you for letting me know!! 😃

[@olgafafa8943]

Thank you so much! Your explanation is so good. I finally understand this topic.

[@TimGabe]

that’s great to hear, Olga!! thanks for commenting 🤩

[@cryptoengineerq831]

great tutorial, thank you for simplifying the concept of autolayout. subbed

[@TimGabe]

no problem, happy to help my friend!!

[@sayekatchakraborty2552]

Hey! there! thank you so much. Easy to understand your tutorial. Keep it up :D

[@TimGabe]

this is so appreciated, Sayekat 🤩🙏 happy that you liked it, will do my best to keep providing valuable content for 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!

[@TimGabe]

this is amazing feedback. thank you so much!!

[@ruhiali9219]

thank you so much, so kind of you

[@reyhaneh5369]

you taught auto layout very well and simple, Thanks so much

[@TimGabe]

thank you for the kind words, Rey. very appreciated! 🥳

[@shavaladesilva2265]

My god dude! Superclear 🎉🎉

[@user-ts8vh8vm5m]

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!

[@nugzarkutidze4044]

Tim, Thank you ! That was so helpful for me

[@TimGabe]

great to hear that you found it helpful, Nugzar 💜😃

[@pearlite6243]

Very good explanation, thanks Tim!

[@TimGabe]

happy you liked the video 🤩 thank you so much for engaging with the content!!

[@dw4937]

great content Tim!

[@asmrivca]

very helpful, thank you

[@TimGabe]

appreciate it, Ivca!! 🥳

[@arbaazkhan4887]

Wow, well explained! Thanks!

[@TimGabe]

really happy you liked it, Arbaaz! 😃

[@jesusa5618]

Thanks for this informative video. I loved how straightforward your instructions were.

[@TimGabe]

that's so cool to hear, thank you!!

[@JasperPauwels]

Thanks man, great video explaining and showing off auto layout.

[@TimGabe]

Jasper!! thank you so much for the kind comment 🙏☺️ I hope I can continue providing content that you find valuable!

[@laracassardelia9178]

Perfectly explained! Thanks!!!!

[@TimGabe]

thank you for the support!!

[@RoXxIE2244]

omg grear video i've been struggling so much

[@TimGabe]

amazing to hear that you liked it!! 🥳

[@fujaielxrahman7352]

Most effectively explained man. Wish you more success

[@TimGabe]

sincerely appreciate it, my friend 🙏😃

[@sandradavis3421]

I love how clear and simple, you explained the concept ! Thanks

[@TimGabe]

that's great to hear. thanks for the comment 😃

[@dineshdesigns7876]

Super helpful 😍Thank you for this

[@TimGabe]

thank you for supporting, Dinesh! 🤩

[@alemjamir698]

Best auto layout video ever. Thanks.

[@TimGabe]

that's so cool to hear, Alem!! thank you!

[@inigozepeda7954]

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

[@TimGabe]

wow, that’s what I call positive feedback. so so nice of you to say, Iñigo 🤩 happy you found it helpful!

[@CoolIntellect]

Thanks For This Amazing Stuff Man!

[@TimGabe]

appreciate your comment, friend!

[@ahmedsodany3012]

Great tut, thanks Tim

[@TimGabe]

thanks for the nice comment, Ahmed! 🤩

[@jaijawliya]

I liked the way of explained easily. I have never seen like this easily way of autolayout understood on youtube..🙏👍🤟🙌

[@TimGabe]

really appreciate this kind comment, Jaiprakash! thanks a lot!! 🤩

[@Svetlana-hk3mm]

Thank you! I have learned a lot today.

[@TimGabe]

happy to help, svetlana!

[@Jonathan-we3kf]

Looks good, great explained, I did learn some things. Thx

[@TimGabe]

delighted to hear it, Jonathan 🤩

[@groipe]

Informative, Thanks !!

[@milibaldoni]

Thank u very much! I have just understood how absolute works. Before I was "grouping layers" in order to manipulate an object inside the auto-layout!

[@TimGabe]

happy you found it helpful, Mili! 😃

[@jaysuthar1211]

Best explanation out of all the other youtube videos, thanks much 👍

[@TimGabe]

that's so nice of you! thanks a lot!!

[@madhurinavare7630]

Yes you made Auto layout so much easieeerrrr Thank you❤

[@TimGabe]

that’s so awesome to hear Madhuri 😍 glad you liked it!! ❤️

[@Mogwai88]

Great video, thanks man!

[@TimGabe]

glad you liked it, mark!

[@anniechuong5514]

thank you so much for simplifying this!!!

[@TimGabe]

a huge thanks right back at you for helping me out by commenting, Annie! 😃🙏

[@vigneshn3392]

Thank you. Very helpful.subscribed

[@TimGabe]

happy to have you on the subscriber list, Vignesh!! 😃

[@henkegiaretta]

So good, you're an excellent teacher

[@TimGabe]

so happy you liked it, Henrik!! and thank you so much for commenting. 🙏🥳

[@johebanik1450]

Concept clear with example. Thanks a lot bro.

[@TimGabe]

happy you liked the content, Joheb 🥳🙌

[@ilargi3884]

thanks for the tutorial, so helpful!!

[@TimGabe]

really happy you enjoyed it, my friend 💜

[@kevinrandomly643]

Thanks. I downloaded a template for my first website and this is where I was getting hung up.

[@ChiranjibiDewangan]

thanks mate. super helpful!

[@TimGabe]

glad to be of help!

[@sahilmusicsss]

thanks for autolayout tips, i found canvas stroking as a new and important tool for designers :)

[@TimGabe]

happy to help, sahil!!

[@pozup1596]

It took me 10 videos from various prolific ux figma channels until I found a good video - YOUR video. You'd think that UX designers would be able to structure a tutorial in a coherent manner, but apparently not. So many videos I saw - kept saying how simple Auto Layout is to learn, but refused to elaborate on the fine details like you did. It ultimately made the learning process so much more confusing & difficult, and I lost tons of time. Thanks for the amazing video Tim, I'm starting my very first UX job soon, and never heard of Auto Layout in my life. This is the best introduction to the concept, hands down.

[@TimGabe]

wow, Pozu! what a nice comment. I'm genuinely flattered and happy to read things like this from people like yourself 💜 thank you so much, I'm happy I could be of help!

[@user-zn6sg1rw3b]

THNX! I feel that I finally understood this auto layouts!

[@TimGabe]

that's awesome!!

[@bagasdhardanu]

Yes this is what I needed now

[@TimGabe]

awesome to hear!!

[@zanansari2178]

Your videos are insanely helpful! Byfar the best UI/UX tutorials on KZbin

[@TimGabe]

really appreciate that feedback, my friend 🤩

[@ceyrannecefli5638]

Wow!!! Great explanation.

[@TimGabe]

thank you tooons for the nice comment, Ceyran ☺️🙏

[@sabbirazim1221]

Really it helped me a lot!

[@TimGabe]

happy it helped you, Sabbir! 😃

[@MisstVlog]

Really super helpful video😊

[@TimGabe]

great to hear that you found it helpful, friend! 🥳

[@slsmarthelp4298]

Great lesson ❤

[@TimGabe]

thank 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 👊

[@arifhossain8753]

Simple and cool video!!

[@TimGabe]

thanks a lot Arif 🤩