Master Auto Layout in 20 minutes | 2023 Auto Layout Figma Tutorial
Vložit
- čas přidán 5. 07. 2023
- Download this Figma file: www.figma.com/community/file/...
Music by: Alex-Productions
/ alexproductionsmusic
Welcome to the ultimate Auto Layout tutorial for Figma! In this comprehensive 20-minute video, you'll learn everything you need to know about harnessing the power of Auto Layout to streamline your design workflow.
Whether you're a beginner looking to grasp the basics or an experienced designer seeking advanced tips and tricks, this tutorial has got you covered. Join us as we delve into the latest features and techniques of Auto Layout in Figma, ensuring your designs are responsive, flexible, and pixel-perfect.
Key topics covered in this tutorial:
•Understanding the core concepts of Auto Layout
•How to set up Auto Layout in Figma
•Exploring the various Auto Layout options and properties
•Creating dynamic and adaptive designs with Auto Layout
•Tips for organizing and managing Auto Layout components
•Advanced techniques to optimize your workflow
With clear explanations, step-by-step demonstrations, and real-world examples, this tutorial is designed to help you become an Auto Layout pro in no time. Stay ahead of the game with the most up-to-date information for 2023, ensuring your design skills remain cutting-edge.
Don't let complex layouts and design changes slow you down. Master Auto Layout in Figma and revolutionize the way you approach design. Get ready to take your designs to new heights of efficiency and flexibility!
You explained it in so simple terms. I love it. Thankyou. Love the small moments you had with the dog.Your voice makes me sleepy
Best man alive explained Auto Layout in Figma. Thanks bro it was really helpful.
I haven't even made it through the entire video yet but I can tell you for sure... This is one of the BEST tutorials!!! Not speeding, talking all fast (to make it seem like you're an expert), no moving the mouse in circles 50x in a minute while talking, you're explaining the shortcuts you're using when things just pop up on the screen. Just amazing! I really wish you a lot of success on your journey. You will most certainly help and advance a ton of people. Hat tip to you good sir.
Ah what a nice comment thank you so much! this really encourages me to keep going! really it's all about making other people's journey a bit easier, it's a great world to get into 😃 people like you make it all worth it
❤ I agree . I have been through a lot of tutorials but this one is special. I think it's because most of ytbers want to explain auto lay out in 10 min. Which is NOT enough time and they speed it up. Thanks for the good work!
FINALLY someone that makes a mistake and shows how to fix it! Great tutorial. 🙌
NOW I understand how to make the text wrap when the frame changes size.
Thanks so much.
finally - really meaty tutorial
I second this: Finally a tutorial with the new updates!!! I have to say that the Figma menu bar and functions have changed a lot, so the older tutorials make learners very confused.
I'm glad it helped you find your way through the new updates! 🙂
Finally a tutorial with the new updates. Started learning Figma before all the new updates and it's tough transitioning into the new features because I'm still green. Looking forward to new videos man, thanks
Thank you! This means so much! Just started this channel and its great to know I helped you :)
thank you so much for making the concept so clear and u even gave reference to practise well .
Really liked your video Santi. As a developer I decided to get into design to broaden my scope and I have been watching your videos and this video just hit the nail on auto-layout for me, thank you for the content. ✨✨
thank you santi. You explained all features from the starting with new updates. Everyone is now only explaining about new feartures but not how to use new features from the basic.
Thank you for watching and taking the time to leave a nice comment, I'm currently working on the variables video :)
Very well organized - loved the easy/medium/hard levels! Thank you for the help
I subscribed so quickly. Hands down BEST auto layout tutorial i've ever seen. I've struggled with this forever and after watching this i finally feel confident with it. THANK YOU.
Amazing! Thank you so much for this tutorial. clear and simple.
I can’t put my finger on what you did differently to everyone else when explaining this, but it worked. Bravo 👏🏾
This video was incredibly helpful... thank you for being so straight and to the point!
The one of the best autolayout tutorials on youtube, thank you. This thing tortured me almost 3 days but after your video i realized how to make this cards properly. Thanks again!
Im so glad it helped you with auto layout! it has a bit of a learning curve but once you wrap your head around it you can't go back :)
Cheers man, I appreciate the approach and the gradual build up in difficulty! I followed along and I think I got the hang of it!
Thank you!! This was SO helpful and the BEST auto layout video I've seen.
Your explanation is incredibly insightful! You not only covered the process but also made complex concepts easy to grasp, which is especially beneficial for those who find advanced UI design challenging. Thank you, and keep up the excellent work!!
Bruh you saved me to watch figma whole playlist of the auto layout, thanks !
Best auto layout tutorial so far. Easy to understand.
Im glad you understood! thanks for the nice comment! 👑
awesomeee!! thank you so much!!
This is the best I have watched, you took your time to explain. I appreciate it. Please could you do a video on a case study or portfolio for newbies. Thank you in advance 🎉
I've seen 3-4 videos of how auto layout and Figma works and this is the most helpful one. You explain all this stuff very very nice.
best video on this topic bro
Very comprehensive. Thank you.
I love this! Been lookig for a tutorial to create a responsive card for a project. Been through several youtube videos but this one right here is the best. Even showed us the mistakes we can potentially make in the process.
Hands down the best auto layout tutorial!
This was a fantastic tutorial. Thank you so much for taking the time to help us newbies!
Love your video! I have been struggling with auto layout for a while and thanks to your video, I've learned quite a few tricks ;)
Amazibg tutorial. So helpful breaking it up into the different levels 👌🏼
I would like to thank you for making it super easy to understand.
Excellent video! So detailed and helpful!
thank u so much, finally i can make sense of it! U have a gift! very well explaned!
Thank you, very well explaned!
This is brilliant! Very helpful.
the examples are really helpful thansk
Great video. As a begginer Figma user I didn't quite understand how auto layout worked ; I struggled hard over a couple of days not knowing and not understanding how to peoperly use auto layout. This video was so precious to me. I managed to build that responsibe card all on my own after watching the video. Many many thanks to you and all of your kind who know what begginers might struggle with. Great work ! Thank you ! 🎉
Thank you Santi! your video is easy to understand
This was very helpful, thank you!
Love it! really useful thank you so muchh
Those 🐶!! Good job with the video man!
Great Video with step by step explanations First time here with great value
Best lesson ever🤓 Exactly what I was looking for. All use cases explained with examples, easy to follow along. And the cute doggie is a plus point🐶
This is just too good.
Amazing video, thank you :)
awwwww the dog 😍
Oh god thank you... I have 2 days try to learned make responsive design... And then i see this video and i now i understand little bit about auto layout
I'm glad you're getting it! it can be scary at first but it will become your best ally! I'm uploading a video about responsive design today if its still useful! 😃
Thank yuo very much
This was great thank you!
He is very thorough with his approach. It is worth subscribing wish you had some classes set up. Although these small videos are really fab! Thank you
Amazing video brotha! Really appreciate the attention to detail but also the concise commentary which made learning auto-layout easy to grasp.
Appreciate you! i'm glad you're learning, its really a potent feature once you get a grasp of it! thanks for your energy and your nice comment man!
Incredible! I knew I was going to be a New Subscriber a few minutes in.
Thats so nice! Thank you for subscribing! I hope you enjoy the next videos 😃
Amazing video sir, finally someone explained all aspects of auto layouts to me, you have very good skills when it comes to educating about Figma.
awesome explanation
Thanks a lot man! This is the best tutorial of Auto layout!
Wow i'm glad you found it useful!! 🙂
Thank you
I thought I had to buy a course to understand this 😂 but this is just in the point, thank you!!
Magui me alegra que te haya sido útil, muchas gracias por tu comment! 🙂
7:08 my bookmark to return to
thank you so much for this great tut!
very useful! thanks
You're welcome! 😁
Now that is such a good vid about Auto Layout from the bare basics to some advanced stuff, looking forward to learning more like this mate.
I'll keep the videos coming, i really enjoy creating them as I've received very nice feedback from you guys, Thank you for commenting! 🙂
Super clear！learned a lot
I'm very glad it was useful for you and thank you so much for watching and commenting 🙂
Thank you !
I think I'm in love with you after watching this video. Thanks
awesome tutorial, easy to understand! Thank you
Ty for your nice words 🙂
This was a great video, keep em coming Santi🙌
I will! All your comments are so encouraging it's crazy I thought no one was gonna watch these first videos, I'm very thankful for your kind words!
By far the best tutorial I’ve watched on auto layouts. Thank you so much!
Ah that's so nice of you, thank you very much! 👑
Hi there! Your video helped me out a lot!! Thank you so much!! :D
Commenting to boost the algorithm!! :)
Good video!
Santi, excelente explicación. Muy puntual en cómo se usan los elemtentos. Like it a lot !
Thank U
Bro,,,wowwwww... you are best teacher. Please make a playlist beginer to Pro figma desinger.
Thanks so much for that nice energy! I'm planning on doing that, just had to cover these new features as soon as they came out! Also i'll be posting vids about useful UX and strategy tools so you become well rounded designers and get them big bucks lol 🙂
Awesome video, thank you so much 😍
I'm glad you found it useful!
Totally worth watching. Thanks mate for making such amazing tutorial.
Wow ty for taking the time to leave such a nice comment! 🙂
I finally found my missing gem. ❤
Great video
Thank you very much!
Amazing and to the point with examples.
I'm glad you like the format! ty for commenting 🙂
Sir i love your teachings sir
I really get more knowledge about autolayout from you sir thanks for teaching autolayout
He is actually teaching, not like others shitty youtubers who read blog posts in a video and make it like tutorial🎉 you earned a subscriber bro
Thanks man really appreciate having you around! I hope you enjoy the next videos 🙂
Incredible thorough content, amazing!!!!!!! Please keep updating
Thank you! Im glad you found it useful, ill keep it up 😁
thanks
Thank for video, it helps me a lot.
You're welcome my man!
thanks for the video, it helped me a lot especially card design! Waiting for more✌
Thank you for the support! videos will keep coming I hope you enjoy them 😃
This video was fantastic. Thanks for the learnings man. Keen to test
Thank you so much! i'm very glad you found it useful! 🙂
wow, all in one just 20 min, this guy deserves more subscribers.
Thank you very much! I'm actually very grateful and surprised with how many subs I got, really appreciate ya'll!
Thank you very much bro it really helped me and got many ideas about auto layout. i was too confused about auto layout , but this video gave me some clarity thanks for making step by step tutorial in video
When i first started using it I was kinda lost too, but once you get some practice it becomes your bread and butter, Thank you so much much watching!
Thanks!
Thank you for hanging around! 😃
Amazing, thank you!! This was really helpful and can grasp this quite easily. Seems like your dogs wanted to learn Figma too!
Lol thank you! at this point they've seen so much Figma they're can prolly get a job 😃
Bro, esto fue increíble. gran tutorial. de gran ayuda. gracias :)
Me alegra que te haya sido útil! gracias por tomarte el tiempo te comentar bro 🙂
This is great! and special thanks to the puppies! 💛
They are the best coworkers! 😃 thank you for your hanging out!
Muy buena explicación! 👏
Me alegra que te sea de ayuda!
Hi Santi. Great video! I'm wondering: how do you create auto-layouts and not have the Frame labels show up?
Great tutorial man. You deserve more attention.
Thanks man! I do feel a lot of support from ya'll! no rush to add subs, just trying to upload vids that can be useful for others 😃🤘
That tutorial is awesome Thanks. You earned 1 subscriber and I encourage you to post tutorials your teaching method is awesome. BTW I like the pause when you go out and come in again😊
Thank you so much! I hope to have you as a sub for a long time, will keep the videos coming and the short pauses too 😌
thnku awesome explanation
You're welcome I'm very glad you liked it!
Your visual recreating of the Auto Layout features step by step is EXCELLENT. I have subscribed to your channel in the hope you continue laying out complex ideas in such practical flows.
Thank you very much! I'm always working on a new video for you guys, the next one is challenging (Variables) but I'll find a way to simplify it as much as possible!
so useful and pretty💯
Professor🤍
❣i love you all@@hanieabbasi7062
I'm glad you found this useful, thanks for taking the time to comment 🙂
you explained it so well n easy to understand for a visual learner like me
Thanks for the feedback and your comments, i will continue to use visual methods to explain these concepts! 😃
mate thanks, you're the man, say hi to your dog
Auto layout is soo powerful once you get the hang of it. You can also use it when designing websites in a way that mimics the “box model” of HTML and CSS to make designs that translate to code very seamlessly.
Absolutely! Figma is doing a great job at bringing designers and devs together and making everybody's job easier 🙂
This was so cool. Please can you make a video on constraints & components? Or is it covered in the figma basics?
Very lightly but I will definitely make a dedicated video on components! thank you for watching :)