ฝัง
- เผยแพร่เมื่อ 19 พ.ค. 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](http://i.ytimg.com/vi/kg0XA0MPZ0w/mqdefault.jpg)
You made Autolayout seem like a breeze
Tim, your teaching style is concise and on point
Tim "The Legend" Gabe. I hate how underrated your channel is. Your work is insightful, practical and simple.
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?
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! 🤩
The clearest and most concise auto layout tutorial on TH-cam. Thank you!
really appreciate it, Tim 🙏🙏
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 ☺️🙏
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 🙏😃
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! 😃
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 👌🥳
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!!
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 🤩🙏
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!! 🤩
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 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 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!!
This is just amazing. Thanks for sharing!
happy to share my knowledge, ricardo!
Your videos are amazing. Short and detailed. Thanks Tim
super happy to hear it, Iva! thanks for letting me know by commenting 🥳
Thanks For This Amazing Stuff Man!
appreciate your comment, 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 :)
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 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 !!
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!!
Thanks for the content Tim! Really professional and clear! Keep going!
thanks a lot Ricardo!!
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!!
Super helpful to understand Auto Layout in Figma even better, thanks dude!
happy to help Yaltha!! 🥳🙌
I love how clear and simple, you explained the concept ! Thanks
that's great to hear. thanks for the comment 😃
great tutorial, thank you for simplifying the concept of autolayout. subbed
no problem, happy to help my friend!!
Thank you so much for explaining the logic behind creating responsive design.
and thank you so much for commenting ☺️🎉
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 🙏😃
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!
Thanks for the very detailed tutorial. It helped me a lot!
happy to hear it, my friend!
this is so good, now i understand a little about auto layout, thanks appreciate the content
thanks a lot for commenting and supporting, Jhon! 😃
Great explanation of an auto layout! Thanks for your content!
Thanks for this informative video. I loved how straightforward your instructions were.
that's so cool to hear, thank you!!
I've watched several videos, and they are in a very hurry to end the video. I don't know why... That doesn't help much for a learner. But your video is much more clear. I've got an idea from your video. Thanks!
Tharindu, thank you so much for sharing this with me. much appreciated, 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
that’s so nice to hear, Ime ☺️ thank you for letting me know!! 😃
This was mega helpful in refining existing practices. Thank you :D
awesome to hear, Aditi!!
Best explanation out of all the other youtube videos, thanks much 👍
that's so nice of you! thanks a lot!!
you taught auto layout very well and simple, Thanks so much
thank you for the kind words, Rey. very appreciated! 🥳
Thank you so much! Your explanation is so good. I finally understand this topic.
that’s great to hear, Olga!! thanks for commenting 🤩
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 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!!
Your videos are insanely helpful! Byfar the best UI/UX tutorials on TH-cam
really appreciate that feedback, my friend 🤩
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!
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!!
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!!
Perfectly explained! Thanks!!!!
thank you for the support!!
Thank you very much for the video and your figma file! ❣
happy to help! hope you liked it, my friend ☺️🙌
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 🤩
thank you so much for making these easy to use tutorials :)
happy to be creating content that resonates 🤩
Just watched this again. Super helpful!
delighted to hear that you liked it 🥳
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!! 🤩
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 😁🙏
Most effectively explained man. Wish you more success
sincerely appreciate it, my friend 🙏😃
Thanks for the upload! Great information
You have a real gift of teaching
that's very nice of you! thank you!!
Super helpful 😍Thank you for this
thank you for supporting, Dinesh! 🤩
Tim, Thank you ! That was so helpful for me
great to hear that you found it helpful, Nugzar 💜😃
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! ☺️💜
i love how you explain .... is good and look easy to follow .
so happy to hear that you found it valuable, my friend 😃🙏
THNX! I feel that I finally understood this auto layouts!
that's awesome!!
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!
Concept clear with example. Thanks a lot bro.
happy you liked the content, Joheb 🥳🙌
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 😊✨
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!
happy you found it helpful, Mili! 😃
Thanks Tim! It is really good video which helps me a looooooott!
Thank you! I have learned a lot today.
happy to help, svetlana!
thanks! this is the video which i was looking for a loooong time!
Very good explanation, thanks Tim!
happy you liked the video 🤩 thank you so much for engaging with the content!!
Best auto layout video ever. Thanks.
that's so cool to hear, Alem!! thank you!
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.
so glad that this taught you how to use it, it indeed is a struggle!!
Very helpful content. Thanks man.
hey Kumar! thanks for commenting 🥳
Wow, well explained! Thanks!
really happy you liked it, Arbaaz! 😃
thank you so much for simplifying this!!!
a huge thanks right back at you for helping me out by commenting, Annie! 😃🙏
Thank you for putting in the time to teach others.
excited that I can be of help! 🥳
Yes this is what I needed now
awesome to hear!!
Thank you. Very helpful.subscribed
happy to have you on the subscriber list, Vignesh!! 😃
thanks mate. super helpful!
glad to be of help!
THIS IS SO HELPFUL MAY GOD BLESS YOU
I really appreciate that, Shamit! happy I could help 😃🙏
Yes you made Auto layout so much easieeerrrr Thank you❤
that’s so awesome to hear Madhuri 😍 glad you liked it!! ❤️
omg grear video i've been struggling so much
amazing to hear that you liked it!! 🥳
Thanks. I downloaded a template for my first website and this is where I was getting hung up.
So good, you're an excellent teacher
so happy you liked it, Henrik!! and thank you so much for commenting. 🙏🥳
Great video. you simplified auto layouts so well...
so glad I could help, Nonhlanhla 🤩
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!!
Looks good, great explained, I did learn some things. Thx
delighted to hear it, Jonathan 🤩
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 your time.👍
thank you for watching!
Wow man, this video is so helpful. Understood auto layout well🔥
happy to hear it, Asim! 🤩
amazing , your teching is so perfect😍,thank u teacher
thank you!! glad you liked it 😃
thanks for the tutorial, so helpful!!
really happy you enjoyed it, my friend 💜
Thank you so much Gabe.
thank you right back, Dare!! 🤩
Thanks for the tutorial, its really helpful. 🤝🔥
super happy you liked it, Valentino!! 🥳🙏
Great tut, thanks Tim
thanks for the nice comment, Ahmed! 🤩
thanks for autolayout tips, i found canvas stroking as a new and important tool for designers :)
happy to help, sahil!!