Master Figma Auto Layout in 10 Minutes (2022 Tutorial)
Vložit
- čas přidán 11. 07. 2024
- 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
![[NEW] 🔥 новый Auto Layout в Figma 4.0 (уроки Фигмы 2022) на реальных примерах! Урок 23](/img/n.gif)
You made Autolayout seem like a breeze
Tim, your teaching style is concise and on point
bounce tip , you can use X shortcut key to set spacing between or packed without going into advanced setting of Autolayout!
that’s a great tip, Ahmad! thanks a lot for sharing 🤩
That's actually a golden tip!
It could be a great tip if I knew what's the X shortcut key is...
@@RobbSnor explain?
@@TheMojojojoism same... still not able to figure it out
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!
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!! 🙏
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. ❤
that really means a lot, Anjali 🙏 thank you so much for the kind comment 💜☺️
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!
Thanks man, I can see the effort and hard work you've put in this video. Keep up the great work!
appreciate you noticing that, Blazhe. thanks a lot for adding a comment to express it! 🤩
Keep up the great work! One of the best channels I have seen. You explain it very well without going too slow.
that makes me so glad, Michael!! 🙏 Thanks a lot! 😃
The clearest and most concise auto layout tutorial on CZcams. Thank you!
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!
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 🙏😃
Very cool video! The way you explained that auto layout was basically flex for Figma made so much sense to me. Thank you!
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.
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 👌🥳
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.
Aside from the fact that you nailed the topic, your video quality is just wow! I am subscribing asap!
Eddie, this means more than you think!! thanks a lot, man 🤩🙏
One of the simplest and clearest explanation of autolayout feature of Figma. Thanks Tim. Really appreciate. I am following you for all your videos.
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!
that’s just great to hear, Heloisa 😃 thank you for leaving a comment and showing your appreciation ☺️🙏
You just gave me exactly what I was looking for🤗
Thank you very much for this video
genuinely happy that I could help, Aisha 🤩🙏 thank you for this comment!!
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 :)
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 😃🙏
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!
that's so nice to hear. thank you!!
Thanks for the content Tim! Really professional and clear! Keep going!
thanks a lot Ricardo!!
Your videos are amazing. Short and detailed. Thanks Tim
super happy to hear it, Iva! thanks for letting me know by commenting 🥳
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
that's so nice to hear, Kamen 🥳 thank you for leaving a comment, my friend!
This is the best video on this topic, so well put together! Thanks
comments like these... thank you Dubravka! I know that the competition is fierce, so this really means a lot 🙏😃
Thanks Tim. Love how easily you explain things.
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.
I'm really happy it helped you!!
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. 👍
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
it's amazing to hear that my first ever tutorial still resonates with people! thank you!!
Super helpful to understand Auto Layout in Figma even better, thanks dude!
happy to help Yaltha!! 🥳🙌
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 !!
thanks! this is the video which i was looking for a loooong time!
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!
really really appreciate this, Abdulhameid 🙏 have a great day/night, my friend 🤩
Best explanation out of all the other youtube videos, thanks much 👍
that's so nice of you! thanks a lot!!
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.
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! ☺️💜
This was mega helpful in refining existing practices. Thank you :D
awesome to hear, Aditi!!
Great explanation of an auto layout! Thanks for your content!
this is so good, now i understand a little about auto layout, thanks appreciate the content
thanks a lot for commenting and supporting, Jhon! 😃
Came after watching Figma's official account Auto layout tutorial, and yours is 100% times better! Keep it up
wow, that’s what I call positive feedback. so so nice of you to say, Iñigo 🤩 happy you found it helpful!
Thank you very much for the video and your figma file! ❣
happy to help! hope you liked it, my friend ☺️🙌
great tutorial, thank you for simplifying the concept of autolayout. subbed
no problem, happy to help my friend!!
Thanks Tim! It is really good video which helps me a looooooott!
thank you so much for making these easy to use tutorials :)
happy to be creating content that resonates 🤩
This is just amazing. Thanks for sharing!
happy to share my knowledge, ricardo!
Thanks for the upload! Great information
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!
this is amazing feedback. thank you so much!!
Thank you so much! Your explanation is so good. I finally understand this topic.
that’s great to hear, Olga!! thanks for commenting 🤩
Thanks for the very detailed tutorial. It helped me a lot!
happy to hear it, my friend!
Thank you for explaining this thoroughly!
a big thanks right back at you Reham for showing your support and commenting!! 😃🙏
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.
such an encouraging comment again, J. so happy that my teaching resonates with people ☺️ thanks a lot!!
such an encouraging comment again, J. so happy that my teaching resonates with people ☺️ thanks a lot!!
Wow man, this video is so helpful. Understood auto layout well🔥
happy to hear it, Asim! 🤩
Thank you so much for explaining the logic behind creating responsive design.
and thank you so much for commenting ☺️🎉
Best auto layout video ever. Thanks.
that's so cool to hear, Alem!! thank you!
Just watched this again. Super helpful!
delighted to hear that you liked it 🥳
Awesome videos, Tim
I love how clear and simple, you explained the concept ! Thanks
that's great to hear. thanks for the comment 😃
You have a real gift of teaching
that's very nice of you! thank you!!
Tim "The Legend" Gabe. I hate how underrated your channel is. Your work is insightful, practical and simple.
Thanks for this informative video. I loved how straightforward your instructions were.
that's so cool to hear, thank you!!
Your videos are insanely helpful! Byfar the best UI/UX tutorials on CZcams
really appreciate that feedback, my friend 🤩
Tim, Thank you ! That was so helpful for me
great to hear that you found it helpful, Nugzar 💜😃
Perfectly explained! Thanks!!!!
thank you for the support!!
i love how you explain .... is good and look easy to follow .
so happy to hear that you found it valuable, my friend 😃🙏
you taught auto layout very well and simple, Thanks so much
thank you for the kind words, Rey. very appreciated! 🥳
Great tutorial here, thanks for the refresher. Definitely subscribed too. I have felt your impact from a faraway Nigerian town.
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!!
Yes you made Auto layout so much easieeerrrr Thank you❤
that’s so awesome to hear Madhuri 😍 glad you liked it!! ❤️
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
that’s so nice to hear, Ime ☺️ thank you for letting me know!! 😃
Thanks For This Amazing Stuff Man!
appreciate your comment, friend!
Super helpful 😍Thank you for this
thank you for supporting, Dinesh! 🤩
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!
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 🥳
@@TimGabe 😊✨
Wow, well explained! Thanks!
really happy you liked it, Arbaaz! 😃
great content Tim!
Thank you for putting in the time to teach others.
excited that I can be of help! 🥳
Hey! there! thank you so much. Easy to understand your tutorial. Keep it up :D
this is so appreciated, Sayekat 🤩🙏 happy that you liked it, will do my best to keep providing valuable content for you!!
Thank you a lot, Tim! It's really a very helpful tutorial
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!
Very good explanation, thanks Tim!
happy you liked the video 🤩 thank you so much for engaging with the content!!
Informative, Thanks !!
Most effectively explained man. Wish you more success
sincerely appreciate it, my friend 🙏😃
Thanks man, great video explaining and showing off auto layout.
Jasper!! thank you so much for the kind comment 🙏☺️ I hope I can continue providing content that you find valuable!
omg grear video i've been struggling so much
amazing to hear that you liked it!! 🥳
Very helpful content. Thanks man.
hey Kumar! thanks for commenting 🥳
thank you so much, so kind of you
THNX! I feel that I finally understood this auto layouts!
that's awesome!!
Thank you! I have learned a lot today.
happy to help, svetlana!
Great tut, thanks Tim
thanks for the nice comment, Ahmed! 🤩
Concept clear with example. Thanks a lot bro.
happy you liked the content, Joheb 🥳🙌
My god dude! Superclear 🎉🎉
Thank you. Very helpful.subscribed
happy to have you on the subscriber list, Vignesh!! 😃
thank you so much for simplifying this!!!
a huge thanks right back at you for helping me out by commenting, Annie! 😃🙏
I liked the way of explained easily. I have never seen like this easily way of autolayout understood on youtube..🙏👍🤟🙌
really appreciate this kind comment, Jaiprakash! thanks a lot!! 🤩
Looks good, great explained, I did learn some things. Thx
delighted to hear it, Jonathan 🤩
So good, you're an excellent teacher
so happy you liked it, Henrik!! and thank you so much for commenting. 🙏🥳
thanks for the tutorial, so helpful!!
really happy you enjoyed it, my friend 💜
Thanks. I downloaded a template for my first website and this is where I was getting hung up.
thanks mate. super helpful!
glad to be of help!
Great stuff, love the transparency, I'd really like to see content on going from auto layout to design system and then working with a design system 🙏
design systems is one topic I've yet to cover on the channel, but I do plan on doing as soon as I find the opportunity.
thanks for giving me this feedback, KamalDeen 🤩
Btw i just used this tutorial for a task in an internship , thanks Tim 😁🙏
THIS IS SO HELPFUL MAY GOD BLESS YOU
I really appreciate that, Shamit! happy I could help 😃🙏
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.
that's so nice of you to say, thanks!!
Thanks for the tutorial, its really helpful. 🤝🔥
super happy you liked it, Valentino!! 🥳🙏
this video made me understand auto layout thank u
Great video. you simplified auto layouts so well...
so glad I could help, Nonhlanhla 🤩
Thank you so much Gabe.
thank you right back, Dare!! 🤩