Master Auto Layout in 20 minutes | 2023 Auto Layout Figma Tutorial
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 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!
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 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 :)
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! 🙂
Very well organized - loved the easy/medium/hard levels! Thank you for the help
Very comprehensive. Thank you.
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 :)
Amazing! Thank you so much for this tutorial. clear and simple.
Thank you, very well explaned!
Excellent video! So detailed and helpful!
This is brilliant! Very helpful.
Thank you !
This was great thank you!
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!!
This video was incredibly helpful... thank you for being so straight and to the point!
Amazibg tutorial. So helpful breaking it up into the different levels 👌🏼
This was very helpful, thank you!
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 ;)
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 🎉
Love it! really useful thank you so muchh
Thank you!! This was SO helpful and the BEST auto layout video I've seen.
Amazing video, thank you :)
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 Santi! your video is easy to understand
I would like to thank you for making it super easy to understand.
thank u so much, finally i can make sense of it! U have a gift! very well explaned!
This was a fantastic tutorial. Thank you so much for taking the time to help us newbies!
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!
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.
the examples are really helpful thansk
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.
Thank you
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! 🙂
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. ✨✨
Great Video with step by step explanations First time here with great value
7:08 my bookmark to return to
thank you so much for this great tut!
Good video!
Bruh you saved me to watch figma whole playlist of the auto layout, thanks !
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!
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
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! 🙂
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 :)
Amazing and to the point with examples.
I'm glad you like the format! ty for commenting 🙂
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!
awesome tutorial, easy to understand! Thank you
Ty for your nice words 🙂
Super clear！learned a lot
I'm very glad it was useful for you and thank you so much for watching and commenting 🙂
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! 🙂
This is just too good.
awesome explanation
Thank U
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🐶
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 ! 🎉
best video on this topic bro
I can’t put my finger on what you did differently to everyone else when explaining this, but it worked. Bravo 👏🏾
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 😃
Thank for video, it helps me a lot.
You're welcome my man!
Thanks a lot man! This is the best tutorial of Auto layout!
Wow i'm glad you found it useful!! 🙂
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.
Incredible thorough content, amazing!!!!!!! Please keep updating
Thank you! Im glad you found it useful, ill keep it up 😁
Best auto layout tutorial so far. Easy to understand.
Im glad you understood! thanks for the nice comment! 👑
very useful! thanks
You're welcome! 😁
Santi, excelente explicación. Muy puntual en cómo se usan los elemtentos. Like it a lot !
Thanks!
Thank you for hanging around! 😃
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! 👑
mate thanks, you're the man, say hi to your dog
thanks
Great video
Thank you very much!
This video was fantastic. Thanks for the learnings man. Keen to test
Thank you so much! i'm very glad you found it useful! 🙂
Those 🐶!! Good job with the video man!
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 🙂
Muy buena explicación! 👏
Me alegra que te sea de ayuda!
thnku awesome explanation
You're welcome I'm very glad you liked it!
Hi there! Your video helped me out a lot!! Thank you so much!! :D
Commenting to boost the algorithm!! :)
awwwww the dog 😍
Sir i love your teachings sir
I really get more knowledge about autolayout from you sir thanks for teaching autolayout
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 🙂
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 😃
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 😌
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 😃
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!
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 😃🤘
This is great! and special thanks to the puppies! 💛
They are the best coworkers! 😃 thank you for your hanging out!
I think I'm in love with you after watching this video. Thanks
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!
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!
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 🙂
I finally found my missing gem. ❤
so useful and pretty💯
Professor🤍
❣i love you all@@hanieabbasi7062
I'm glad you found this useful, thanks for taking the time to comment 🙂
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! 😃
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! 😃
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 :)
Hi Santi. Great video! I'm wondering: how do you create auto-layouts and not have the Frame labels show up?
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 🙂
You're too kind and calm, Santi!
Oh what a nice comment! thank you for your support I hope you enjoy the other vids! 😃
@@SantiVillegasYT cheers 🍻
Hey man great video! Quick question if I’m developing a website for people to signup and keep a profile, do you think it will be better after design it on Figma, to export to webflow or framer? Thanks
Hey man! I'm a huge Webflow fan so I would go with that, but to be honest I haven't explored Framer that much, I've seen it's gaining a lot of traction lately!
thank you so much for this informative and the practice file which challenged me to practice it and think about how can the output be achieved. Nice explanation but I couldn't understand what you did from 16:40 to 16:50. Suppose when I edit the constraint of frame 54 to fill container why does the image size automatically increases?
I'm glad you enjoyed and that you're following the practice file 🙂 Yeah, so the right thing to do is setting that containing frame to fill container, if that doesn't work double click on the image and make sure its set to "Fill"
That helped Thank you! 😊@@SantiVillegasYT
Hey, great video. One question tho. In Advanced Auto Layout example on the left card you have different vertical gap between Title, year, and Lorem Ipsum paragraph, than the one you recreated on the right.
Is it possible to have different gap values inside a single Auto Layout? Because the only way I know how to create different gaps like on the example left is by grouping title+year into one Auto Layout and keep the lorem ipsum paragraph in separate Auto Layout.
To my knowledge that's the only way to do it, because you can only set one gap value for each autolayout frame.
FYI - The figma file you linked to the tutorial has already been completed, where can we get one that starts at the same point as in your video?
Keep it up and maybe branch out to other topics pertaining to design and software so you can expand your audience and get more views. This was wonderful
I'm planning to do so! I got some videos planned on UX tools and concepts!