Тёмный
No video :(

Master Auto Layout in 20 minutes | 2023 Auto Layout Figma Tutorial 

Santi Villegas
Подписаться 2,4 тыс.
Просмотров 60 тыс.
50% 1

Download this Figma file: www.figma.com/...
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!

Опубликовано:

 

5 июл 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 189   
@cynthoniashewprashad3280
@cynthoniashewprashad3280 Год назад
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.
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
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
@bryce2fadeway
@bryce2fadeway 7 месяцев назад
❤ 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!
@marcsill453
@marcsill453 5 месяцев назад
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.
@mbillah4797
@mbillah4797 Год назад
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
@SantiVillegasYT
@SantiVillegasYT Год назад
Thank you! This means so much! Just started this channel and its great to know I helped you :)
@chzx1996
@chzx1996 Год назад
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.
@SantiVillegasYT
@SantiVillegasYT Год назад
I'm glad it helped you find your way through the new updates! 🙂
@hossamsheref9105
@hossamsheref9105 Месяц назад
Best man alive explained Auto Layout in Figma. Thanks bro it was really helpful.
@user-fp7lz7mu2e
@user-fp7lz7mu2e Год назад
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.
@SantiVillegasYT
@SantiVillegasYT Год назад
Thank you for watching and taking the time to leave a nice comment, I'm currently working on the variables video :)
@user-vw1vz8yx9p
@user-vw1vz8yx9p Год назад
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!
@SantiVillegasYT
@SantiVillegasYT Год назад
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 :)
@uui6130
@uui6130 Год назад
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
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
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! 😃
@8bitWatermelon
@8bitWatermelon 5 месяцев назад
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. ✨✨
@chungndansak5404
@chungndansak5404 11 месяцев назад
Best auto layout tutorial so far. Easy to understand.
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Im glad you understood! thanks for the nice comment! 👑
@HolidaysLaura
@HolidaysLaura 5 месяцев назад
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.
@j.anchanajegath7823
@j.anchanajegath7823 20 дней назад
Thank u for this video. I was frustrated for a whole day because of auto layout as a beginner. After referring lots of video I couldn't solve my issues. But after watching this video it really really helped me a lot.
@astromessy
@astromessy Год назад
Amazing video brotha! Really appreciate the attention to detail but also the concise commentary which made learning auto-layout easy to grasp.
@SantiVillegasYT
@SantiVillegasYT Год назад
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!
@mustafatahir1448
@mustafatahir1448 Месяц назад
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
@nnekaayokunle
@nnekaayokunle 3 месяца назад
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 🎉
@wonderingDoT
@wonderingDoT 4 месяца назад
Thank you!! This was SO helpful and the BEST auto layout video I've seen.
@XpreS4Studio
@XpreS4Studio 9 месяцев назад
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 ! 🎉
@aall1920
@aall1920 Год назад
Super clear!learned a lot
@SantiVillegasYT
@SantiVillegasYT Год назад
I'm very glad it was useful for you and thank you so much for watching and commenting 🙂
@hikeme3250
@hikeme3250 Месяц назад
finally - really meaty tutorial
@martinamarino-pc7tn
@martinamarino-pc7tn 2 месяца назад
thank u so much, finally i can make sense of it! U have a gift! very well explaned!
@donnervaix1436
@donnervaix1436 5 месяцев назад
I can’t put my finger on what you did differently to everyone else when explaining this, but it worked. Bravo 👏🏾
@maguipezzm692
@maguipezzm692 Год назад
I thought I had to buy a course to understand this 😂 but this is just in the point, thank you!!
@SantiVillegasYT
@SantiVillegasYT Год назад
Magui me alegra que te haya sido útil, muchas gracias por tu comment! 🙂
@worksmart8166
@worksmart8166 Год назад
Bro,,,wowwwww... you are best teacher. Please make a playlist beginer to Pro figma desinger.
@SantiVillegasYT
@SantiVillegasYT Год назад
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 🙂
@itsnerd404
@itsnerd404 8 месяцев назад
Bruh you saved me to watch figma whole playlist of the auto layout, thanks !
@stevieb1432
@stevieb1432 Год назад
Incredible! I knew I was going to be a New Subscriber a few minutes in.
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Thats so nice! Thank you for subscribing! I hope you enjoy the next videos 😃
@mimiseidl
@mimiseidl Год назад
Amazing video, thank you so much!
@SantiVillegasYT
@SantiVillegasYT Год назад
Obrigado pelo seu comentário Mimi, significa muito para mim 🙂
@shashankasindhe2406
@shashankasindhe2406 Год назад
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
@SantiVillegasYT
@SantiVillegasYT Год назад
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!
@user-zd4fj6cn9z
@user-zd4fj6cn9z 10 месяцев назад
awesome tutorial, easy to understand! Thank you
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
Ty for your nice words 🙂
@iveive4400
@iveive4400 Год назад
very useful! thanks
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
You're welcome! 😁
@bwoyyyy8729
@bwoyyyy8729 6 месяцев назад
best video on this topic bro
@vallejosalyssa2926
@vallejosalyssa2926 5 месяцев назад
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!
@huntbeats2826
@huntbeats2826 Год назад
This was a great video, keep em coming Santi🙌
@SantiVillegasYT
@SantiVillegasYT Год назад
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!
@peterretvari7053
@peterretvari7053 5 месяцев назад
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🐶
@dieulethi99
@dieulethi99 Год назад
Awesome video, thank you so much 😍
@SantiVillegasYT
@SantiVillegasYT Год назад
I'm glad you found it useful!
@user-ru6og4pn7v
@user-ru6og4pn7v 8 месяцев назад
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.
@davedesigns4you
@davedesigns4you 7 месяцев назад
Those 🐶!! Good job with the video man!
@wenl511
@wenl511 9 месяцев назад
awwwww the dog 😍
@user-vm9kr7pj2i
@user-vm9kr7pj2i 8 месяцев назад
This is just too good.
@nahuelcordoba1454
@nahuelcordoba1454 Год назад
Great video
@SantiVillegasYT
@SantiVillegasYT Год назад
Thank you very much!
@989sura
@989sura 25 дней назад
very helpful, thank you
@dandelleum
@dandelleum 7 месяцев назад
Hi there! Your video helped me out a lot!! Thank you so much!! :D Commenting to boost the algorithm!! :)
@syed.simanta820
@syed.simanta820 10 месяцев назад
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
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
Thanks man really appreciate having you around! I hope you enjoy the next videos 🙂
@dbreazy9490
@dbreazy9490 Год назад
Good video!
@karthickamazing3249
@karthickamazing3249 6 месяцев назад
Sir i love your teachings sir I really get more knowledge about autolayout from you sir thanks for teaching autolayout
@princesalman5231
@princesalman5231 8 месяцев назад
awesome explanation
@reem8458
@reem8458 8 месяцев назад
Very well organized - loved the easy/medium/hard levels! Thank you for the help
@mervetemur8147
@mervetemur8147 Год назад
thanks for the video, it helped me a lot especially card design! Waiting for more✌
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Thank you for the support! videos will keep coming I hope you enjoy them 😃
@mohsinop4647
@mohsinop4647 Год назад
thnku awesome explanation
@SantiVillegasYT
@SantiVillegasYT Год назад
You're welcome I'm very glad you liked it!
@carotraicoff
@carotraicoff 7 месяцев назад
I think I'm in love with you after watching this video. Thanks
@llu2736
@llu2736 10 месяцев назад
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!!
@bhagyawijenayake
@bhagyawijenayake Год назад
wow, all in one just 20 min, this guy deserves more subscribers.
@SantiVillegasYT
@SantiVillegasYT Год назад
Thank you very much! I'm actually very grateful and surprised with how many subs I got, really appreciate ya'll!
@apenino
@apenino 7 месяцев назад
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.
@madihak8703
@madihak8703 4 месяца назад
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
@emilyjooe
@emilyjooe 11 месяцев назад
By far the best tutorial I’ve watched on auto layouts. Thank you so much!
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Ah that's so nice of you, thank you very much! 👑
@bengogos7203
@bengogos7203 Год назад
This video was fantastic. Thanks for the learnings man. Keen to test
@SantiVillegasYT
@SantiVillegasYT Год назад
Thank you so much! i'm very glad you found it useful! 🙂
@lolololi3323
@lolololi3323 7 месяцев назад
7:08 my bookmark to return to thank you so much for this great tut!
@rrp7457
@rrp7457 Год назад
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.
@SantiVillegasYT
@SantiVillegasYT Год назад
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!
@user-dp5pv5qg2b
@user-dp5pv5qg2b 11 месяцев назад
so useful and pretty💯
@hanieabbasi7062
@hanieabbasi7062 11 месяцев назад
Professor🤍
@user-dp5pv5qg2b
@user-dp5pv5qg2b 11 месяцев назад
❣i love you all@@hanieabbasi7062
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
I'm glad you found this useful, thanks for taking the time to comment 🙂
@ammasunny1333
@ammasunny1333 Месяц назад
thank you so much for making the concept so clear and u even gave reference to practise well .
@Yingisnothere
@Yingisnothere Год назад
Incredible thorough content, amazing!!!!!!! Please keep updating
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Thank you! Im glad you found it useful, ill keep it up 😁
@smrutitiwari
@smrutitiwari 9 месяцев назад
I would like to thank you for making it super easy to understand.
@ayushtkr6868
@ayushtkr6868 15 дней назад
thank you
@brookleyrigsbee2961
@brookleyrigsbee2961 7 месяцев назад
This video was incredibly helpful... thank you for being so straight and to the point!
@user-co9bt5sg1r
@user-co9bt5sg1r 6 месяцев назад
Thank you
@AppuRiddle
@AppuRiddle 8 месяцев назад
Great Video with step by step explanations First time here with great value
@lilianduarte687
@lilianduarte687 11 месяцев назад
This is great! and special thanks to the puppies! 💛
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
They are the best coworkers! 😃 thank you for your hanging out!
@vamsibalivada9869
@vamsibalivada9869 11 месяцев назад
Thank for video, it helps me a lot.
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
You're welcome my man!
@BrennanJohnson-vo6fe
@BrennanJohnson-vo6fe 7 месяцев назад
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!
@tanyameshram445
@tanyameshram445 6 месяцев назад
This was a fantastic tutorial. Thank you so much for taking the time to help us newbies!
@Freshhsocks
@Freshhsocks Год назад
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.
@SantiVillegasYT
@SantiVillegasYT Год назад
Absolutely! Figma is doing a great job at bringing designers and devs together and making everybody's job easier 🙂
@Lukasntd
@Lukasntd Год назад
Muy buena explicación! 👏
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Me alegra que te sea de ayuda!
@sergio.arboleda
@sergio.arboleda Месяц назад
Thank yuo very much
@dwizcreation
@dwizcreation 4 месяца назад
I finally found my missing gem. ❤
@brunoescoto9630
@brunoescoto9630 11 месяцев назад
Bro, esto fue increíble. gran tutorial. de gran ayuda. gracias :)
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
Me alegra que te haya sido útil! gracias por tomarte el tiempo te comentar bro 🙂
@oriaz07
@oriaz07 11 месяцев назад
Amazing and to the point with examples.
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
I'm glad you like the format! ty for commenting 🙂
@VIIARK
@VIIARK 10 месяцев назад
Thanks a lot man! This is the best tutorial of Auto layout!
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
Wow i'm glad you found it useful!! 🙂
@saisathya6274
@saisathya6274 11 месяцев назад
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.
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
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! 🙂
@1987LIAT
@1987LIAT 6 месяцев назад
Amazing! Thank you so much for this tutorial. clear and simple.
@annagertsen5557
@annagertsen5557 3 месяца назад
This is brilliant! Very helpful.
@raywright8127
@raywright8127 Год назад
Great tutorial man. You deserve more attention.
@SantiVillegasYT
@SantiVillegasYT Год назад
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 😃🤘
@radhey4791
@radhey4791 10 месяцев назад
Totally worth watching. Thanks mate for making such amazing tutorial.
@SantiVillegasYT
@SantiVillegasYT 10 месяцев назад
Wow ty for taking the time to leave such a nice comment! 🙂
@mcanselek3054
@mcanselek3054 11 месяцев назад
Thanks!
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Thank you for hanging around! 😃
@user-qd4oz1cl8n
@user-qd4oz1cl8n 9 месяцев назад
Very comprehensive. Thank you.
@vamboo8918
@vamboo8918 6 месяцев назад
thanks
@emilyemslee
@emilyemslee 10 месяцев назад
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 ;)
@Slampty
@Slampty 6 дней назад
The dog bro!!!
@nichakarnchaowai
@nichakarnchaowai 10 месяцев назад
Thank you Santi! your video is easy to understand
@sunilbohora8623
@sunilbohora8623 8 месяцев назад
Thank U
@zarinamama
@zarinamama 9 месяцев назад
Amazibg tutorial. So helpful breaking it up into the different levels 👌🏼
@nourhanali1331
@nourhanali1331 3 месяца назад
This was very helpful, thank you!
@isuhanas6976
@isuhanas6976 Год назад
you explained it so well n easy to understand for a visual learner like me
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Thanks for the feedback and your comments, i will continue to use visual methods to explain these concepts! 😃
@Bliss587
@Bliss587 9 месяцев назад
Excellent video! So detailed and helpful!
@mariejae92
@mariejae92 Год назад
Amazing, thank you!! This was really helpful and can grasp this quite easily. Seems like your dogs wanted to learn Figma too!
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Lol thank you! at this point they've seen so much Figma they're can prolly get a job 😃
@TheMalikShow
@TheMalikShow 8 месяцев назад
the examples are really helpful thansk
@gangstermania
@gangstermania 8 месяцев назад
Santi, excelente explicación. Muy puntual en cómo se usan los elemtentos. Like it a lot !
@MuzamilKhan-rl2sh
@MuzamilKhan-rl2sh Год назад
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😊
@SantiVillegasYT
@SantiVillegasYT Год назад
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 😌
@real_user_experience
@real_user_experience 7 месяцев назад
Thank you, very well explaned!
@hroman_codes
@hroman_codes 4 месяца назад
This was great thank you!
@abscondet
@abscondet 11 месяцев назад
You're too kind and calm, Santi!
@SantiVillegasYT
@SantiVillegasYT 11 месяцев назад
Oh what a nice comment! thank you for your support I hope you enjoy the other vids! 😃
@abscondet
@abscondet 11 месяцев назад
@@SantiVillegasYT cheers 🍻
@upnishadpandya4863
@upnishadpandya4863 Год назад
This was so cool. Please can you make a video on constraints & components? Or is it covered in the figma basics?
@SantiVillegasYT
@SantiVillegasYT Год назад
Very lightly but I will definitely make a dedicated video on components! thank you for watching :)
Далее
Чёрная ДЫРА 🕳️ | WICSUR #shorts
00:49
Просмотров 1,6 млн
You’re using Auto-Layout WRONG
6:56
Просмотров 15 тыс.
How and When to Use Auto Layout in Figma
15:59
Просмотров 4 тыс.
The Framer Basics No One Explains (Until Now)
16:47
Просмотров 37 тыс.
Auto Layout for Beginners (crash course)
21:19
Просмотров 22 тыс.
How to use Figma Frames & Autolayout?
1:01:31
Просмотров 118 тыс.
Master Figma Auto Layout in 10 Minutes (2022 Tutorial)
11:08
Learn Figma Auto Layout in 30 Minutes | FREE COURSE
41:56
KILLER Auto Layout Tutorial in FIGMA
10:36
Просмотров 31 тыс.