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
Пікірлер: 514
You made Autolayout seem like a breeze Tim, your teaching style is concise and on point
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.
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 💜☺️
bounce tip , you can use X shortcut key to set spacing between or packed without going into advanced setting of Autolayout!
@TimGabe
2 жыл бұрын
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
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.
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 !!
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!
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!
The clearest and most concise auto layout tutorial on KZread. Thank you!
@TimGabe
Жыл бұрын
really appreciate it, Tim 🙏🙏
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 🙏😃
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!
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 ☺️🙏
Tim "The Legend" Gabe. I hate how underrated your channel is. Your work is insightful, practical and simple.
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
6 ай бұрын
that's so nice to hear. thank you!!
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! 😃
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!
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 😃🙏
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! 🤩
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
9 ай бұрын
glad you liked it, umair. appreciate the comment!!
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
8 ай бұрын
it's amazing to hear that my first ever tutorial still resonates with people! thank you!!
Very cool video! The way you explained that auto layout was basically flex for Figma made so much sense to me. Thank you!
@TimGabe
2 жыл бұрын
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!! 🤩
I love the way you explained. Hats off bro. Keep it up. I expect advanced tutorials from you.
@TimGabe
2 жыл бұрын
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 👌🥳
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 🤩🙏
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 👊
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!!
@TimGabe
9 ай бұрын
happy i could help, my friend!!
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!! 😃
Thanks Tim. Love how easily you explain things.
@TimGabe
Жыл бұрын
happy that it resonated, Gaby! 🤩
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!!
Best explanation out of all the other youtube videos, thanks much 👍
@TimGabe
11 ай бұрын
that's so nice of you! thanks a lot!!
Your videos are amazing. Short and detailed. Thanks Tim
@TimGabe
Жыл бұрын
super happy to hear it, Iva! thanks for letting me know by commenting 🥳
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
8 ай бұрын
this is amazing feedback. thank you so much!!
Perfectly explained! Thanks!!!!
@TimGabe
9 ай бұрын
thank you for the support!!
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! 😃
great tutorial, thank you for simplifying the concept of autolayout. subbed
@TimGabe
8 ай бұрын
no problem, happy to help my friend!!
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 🙏😃
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!
You have a real gift of teaching
@TimGabe
7 ай бұрын
that's very nice of you! thank you!!
Super helpful to understand Auto Layout in Figma even better, thanks dude!
@TimGabe
Жыл бұрын
happy to help Yaltha!! 🥳🙌
Great explanation of an auto layout! Thanks for your content!
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 🤩
Best auto layout video ever. Thanks.
@TimGabe
Жыл бұрын
that's so cool to hear, Alem!! thank you!
I love how clear and simple, you explained the concept ! Thanks
@TimGabe
6 ай бұрын
that's great to hear. thanks for the comment 😃
This is just amazing. Thanks for sharing!
@TimGabe
9 ай бұрын
happy to share my knowledge, ricardo!
thanks! this is the video which i was looking for a loooong time!
Thanks for the very detailed tutorial. It helped me a lot!
@TimGabe
11 ай бұрын
happy to hear it, my friend!
Thanks for the upload! Great information
Thank you so much! Your explanation is so good. I finally understand this topic.
@TimGabe
Жыл бұрын
that’s great to hear, Olga!! thanks for commenting 🤩
Thank you a lot, Tim! It's really a very helpful tutorial
Thanks Tim! It is really good video which helps me a looooooott!
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!
you taught auto layout very well and simple, Thanks so much
@TimGabe
Жыл бұрын
thank you for the kind words, Rey. very appreciated! 🥳
You just gave me exactly what I was looking for🤗 Thank you very much for this video
@TimGabe
2 жыл бұрын
genuinely happy that I could help, Aisha 🤩🙏 thank you for this comment!!
great content Tim!
Thank you very much for the video and your figma file! ❣
@TimGabe
Жыл бұрын
happy to help! hope you liked it, my friend ☺️🙌
Great tut, thanks Tim
@TimGabe
Жыл бұрын
thanks for the nice comment, Ahmed! 🤩
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! 😃
Just watched this again. Super helpful!
@TimGabe
Жыл бұрын
delighted to hear that you liked it 🥳
Thank you so much for explaining the logic behind creating responsive design.
@TimGabe
Жыл бұрын
and thank you so much for commenting ☺️🎉
Thank you soo much. All other tutorial videos only shows what is this and how it actually works. But now if I get stuck in any of the hug hug or fixed situation I will know what is this and how to solve those problem. From last 1.5 years this autolayout was real pain in my figma journey. Don't know how can I thank you.
@TimGabe
5 ай бұрын
so glad that this taught you how to use it, it indeed is a struggle!!
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!! 🤩
Super helpful 😍Thank you for this
@TimGabe
Жыл бұрын
thank you for supporting, Dinesh! 🤩
thank you so much, so kind of you
Most effectively explained man. Wish you more success
@TimGabe
Жыл бұрын
sincerely appreciate it, my friend 🙏😃
Thanks. I downloaded a template for my first website and this is where I was getting hung up.
Awesome videos, Tim
Thanks for this informative video. I loved how straightforward your instructions were.
@TimGabe
8 ай бұрын
that's so cool to hear, thank you!!
Very helpful content. Thanks man.
@TimGabe
Жыл бұрын
hey Kumar! thanks for commenting 🥳
Wow, well explained! Thanks!
@TimGabe
Жыл бұрын
really happy you liked it, Arbaaz! 😃
Thank you for putting in the time to teach others.
@TimGabe
Жыл бұрын
excited that I can be of help! 🥳
This was mega helpful in refining existing practices. Thank you :D
@TimGabe
Жыл бұрын
awesome to hear, Aditi!!
Thank you for explaining this thoroughly!
@TimGabe
Жыл бұрын
a big thanks right back at you Reham for showing your support and commenting!! 😃🙏
So good, you're an excellent teacher
@TimGabe
Жыл бұрын
so happy you liked it, Henrik!! and thank you so much for commenting. 🙏🥳
Thank you! I have learned a lot today.
@TimGabe
8 ай бұрын
happy to help, svetlana!
THIS IS SO HELPFUL MAY GOD BLESS YOU
@TimGabe
Жыл бұрын
I really appreciate that, Shamit! happy I could help 😃🙏
Subscribed .. Spent literally 2hrs while trying to put a simple text on shape , was not aware of abs position button .. Thanks Tim . But from design perspective , I think it makes more sense for Figma to place the absolute positioning button under auto layout section ..
@TimGabe
Жыл бұрын
hey Mehmet! thanks a lot for commenting a supporting 🙏 I'm sure they had their reasons for the positioning of the button, but I do agree that it feels like another good option for the positioning of the button
My god dude! Superclear 🎉🎉
I have been using auto layout for quite a while and wished absolute positioning existed. I didn't know about it 😂. There's always something to learn. Thanks man. I love your content. I just started watching your videos and they are amazing.
@TimGabe
6 ай бұрын
that's so nice of you to say, thanks!!
Thanks For This Amazing Stuff Man!
@TimGabe
9 ай бұрын
appreciate your comment, friend!
thank you so much for simplifying this!!!
@TimGabe
Жыл бұрын
a huge thanks right back at you for helping me out by commenting, Annie! 😃🙏
God bless you bro. Am amazed ❤
This channel is so under rated. Love from India ❤
@TimGabe
Жыл бұрын
that’s a very nice comment, Harshit ☺️🙌 appreciate it! 💜
this video made me understand auto layout thank u
THNX! I feel that I finally understood this auto layouts!
@TimGabe
7 ай бұрын
that's awesome!!
Informative, Thanks !!
Thank you. Very helpful.subscribed
@TimGabe
Жыл бұрын
happy to have you on the subscriber list, Vignesh!! 😃
thank you so much for making these easy to use tutorials :)
@TimGabe
9 ай бұрын
happy to be creating content that resonates 🤩
i love how you explain .... is good and look easy to follow .
@TimGabe
2 жыл бұрын
so happy to hear that you found it valuable, my friend 😃🙏
Great lesson ❤
@TimGabe
7 ай бұрын
thank you 💜
Hey bro! I am now more confident in using Auto Layout in my design work and feel that I have a deeper understanding of how it can be used to improve the overall quality of my designs. Your demonstrations were very excellent and helped me understand the ideas much more quickly. Thank you my friend once more for sharing your knowledge and experience with us. I am appreciative of the chance to learn from you because of your teaching enthusiasm and commitment. You're a Great teacher my friend!
@TimGabe
Жыл бұрын
this is really, really appreciated Kalyan. you're awesome for putting the time into these comments and spreading love -- thank you 🥳🤩 have an amazing morning/day/night, my friend 🥳
@kaldarges
Жыл бұрын
@@TimGabe 😊✨
Thank you so much Gabe.
@TimGabe
Жыл бұрын
thank you right back, Dare!! 🤩
Your videos are insanely helpful! Byfar the best UI/UX tutorials on KZread
@TimGabe
10 ай бұрын
really appreciate that feedback, my friend 🤩
I lik how 10 minutes video can explain many things. Thankyou ✨✨
@TimGabe
Жыл бұрын
glad you found it helpful, Ananta 🤩
thanks mate. super helpful!
@TimGabe
11 ай бұрын
glad to be of help!
Thanks for your time.👍
@TimGabe
9 ай бұрын
thank you for watching!
Very good explanation, thanks Tim!
@TimGabe
2 жыл бұрын
happy you liked the video 🤩 thank you so much for engaging with the content!!
I watched dozens of introductory Figma tutorials in the past two days. Yours is the most outstanding one. I, as a learner, have to do three things: Hear the commentary, watch the actions, try to remember how this piece fits into the hundreds of other pieces that make up Figma. Not an easy assignment for the learner OR the teacher. • Commentary: You describe the purpose of the feature. You give a most-likely example scenario and don't clutter the discussion with lots of other possible scenarios. • Actions: You show the necessary actions to use the feature. Your cursor moved very deliberately, pauses long enough for the eye to track it, and you use Zoom effectively. • This Piece: You stay laser-focussed on the subject of Auto Layout. There are SO many features you could have also mentioned, but you disciplined yourself to stay on point. Great job! Things to consider doing differently in the future? Reduce the number of times you say how "easy" so-and-so is. It's kinda distracting coming from any teacher (and I've heard some really great ones do it to excess). As someone once said, "When your work speaks for itself, don't interrupt it."
@TimGabe
Жыл бұрын
wow, what a breakdown. 🤩 thank you so so much for this sincere and constructive comment, it really put a smile on my face and makes me immensely excited to evolve more as a teacher. happy new year, my friend!! 🎉😃
Tim, Thank you ! That was so helpful for me
@TimGabe
Жыл бұрын
great to hear that you found it helpful, Nugzar 💜😃
I love auto layout too! I really like your style of presenting Figma's features, it's simple and to the point. I'm training a new designer in Figma and I'll be sharing several of your videos. Thanks.
@TimGabe
Жыл бұрын
such an encouraging comment again, J. so happy that my teaching resonates with people ☺️ thanks a lot!!
@TimGabe
Жыл бұрын
such an encouraging comment again, J. so happy that my teaching resonates with people ☺️ thanks a lot!!
Simple and cool video!!
@TimGabe
Жыл бұрын
thanks a lot Arif 🤩
amazing , your teching is so perfect😍,thank u teacher
@TimGabe
Жыл бұрын
thank you!! glad you liked it 😃