Figma Auto Layout | Getting Started with Auto Layout
VloĆŸit
- Äas pĆidĂĄn 5. 07. 2024
- Figmas new Auto Layout feature is an absolute game changer! Auto Layout allows you to create complex layouts that respond as the frame grows or shrinks. Figma Auto Layout mimics CSS Flexbox and because of that it's incredible smart. In this video I cover the basics of Auto Layout as well as some advanced techniques like nesting auto layouts inside of other auto layouts. Remember to Subscribe goo.gl/6vCw64
đ //////////// Join this channel to get access to perks:
/ @jesseshowalter
0:00 - Intro
0:35 - Starting File
1:18 - Use Frames
1:54 - Make a Button with Auto Layout
2:51 - The Parent Frame
3:46 - Auto Layout Options
4:50 - Padding & Alignment
5:52 - Packed vs Space Between
7:15 - A more complex example
8:15 - An even more complex example
10:55 - Children Filling the Container
11:20 - Customizing the list
12:44 - Outro
------------------------------------------------------------------------------------
đ° //////////// Want to start trading Bitcoin and other Cryptocurrency? I use Coinbase
www.coinbase.com/join/showat_d
đ€ //////////// Looking for 1:1 mentorship or feedback on your portfolio?
Book a session with me on Superpeer: superpeer.com/jesseshowalter
đ ////////// Connect with me here
Instagram: / imjesseshow
Twitter: / imjesseshow
đ« ////////// Sign up for my Monthly Newsletter
www.jesseshowalter.com/newsletter
------------------------------------------------------------------------------------
đ» ////////// I host all my websites with Hostinger
www.hostg.xyz/SH5fF
đ” ////////// Elevate your videos with record-label quality music from Musicbed
share.mscbd.fm/imjesseshow
đž ////////// The Equipment I use
www.amazon.com/shop/jesseshow...
How can you start using Auto Layout in your projects?
I learned auto layout from pablo stanley's channel. Now I am pretty much comfortable with it.
@@Mayank-rs7kg Hey same thing man.
I can't figure out to add color to the background of each one of my frames. Please help.
I loved the video, thank you for the great content! I'll hopefully be using the Auto Layout for creating various cards and components as part of a Design System. Would love to see a more complex example - like creating Auto Layout element with a behavior for resizing from Web to mobile screen size (Will elements stack on top of each other or something else?) :)
Auto-layout e v e r y t h i n g
2 years late but even after figma updates this is still one of the only auto-layout tutorials that clicked with me. explaining a design in figma as a collection of frames rather than elements really helped. thanks
Came back to this video after almost a year, while organizing my messy tabs, and i remember struggling to learn auto layout around a year back untill i watched this video and now i love auto layout. Thanks to this video and creator. The simplest way to understand auto layout for a beginner.
The clearest explanation of Auto Layout I've seen. You smashed it, Jesse! Cheers
Many mahalos, T!
Agree. I was so overwhelmed by Auto Layouts and watched couple of video but only now I had the "ooh" moment.
in my life i tell you
I am a Junior UX Designer and I really love the way to talk and explain stuff. You are an amazing man, keep going!
Thanks so much for seeing value in my work! Have a good week!
Tuong got the hots for teacher đ
How much salary
Yes, he is a natural teacher for sure. Love his videos.
I like the intro and the song , the motivational style of speaking and the content. I was feeling down today and disheartened but saw your video and gave me the courage to keep on pressing .
Thanks for creating this, Jesse! Haven't used figma in forever and my new team uses it - this was by far the clearest explanation to get me up to scratch again!
Your explaining is perfect! Good example
This is the first video where I really felt like I understood what was happening. Thankful for this!
Thanks so much, Lamar! Iâm so glad I was able to help out!
Yeah he is a really great splainer
Best tutorial of auto layout I have ever seen. Was getting so confused before. Now, things are fixing in bits and pieces. So much thanks to you!
The best explanation of auto layout Iâve seen in youtubeđđŒ
Wow, thanks!
I was so confused with auto layout in Figma and only comprehend it after watching your video. Excellent explanation and example. Thanks a lot for your effort!
Wow! I'm following along with the tutorial, and as soon as a question comes up or I don't get something, a moment later you've addressed it! Super thorough and very much worth watching!
I have watched so many tutorials that go too deep too fast before landing here and I am so glad I found you. Such a proper and simple explanation of auto layout.
This has to be the best and most straight forward auto layout tutorial I've seen.
The best tutorial Iâve seen so far.
Watched it and definitely watching again.
You just earned my subscription. Thank you for helping other junior designers out there
This is a great explanation and tutorial. The one key thing that makes Figma superior to all others is that it mimics how you would normally code websites. Frames essentially become html divs that can receive similar styling properties. These styled frames (divs) then have boxes or content placed inside them. This is formally known as the CSS Box Model and Figma is the only design software I have used that follows this model.
And in this video, auto-layout highly mimics the CSS grid styling properties. In my opinion, Figma and itâs features are the closest thing you can get to a designing for web in a design tool without ever writing a single line of code (apart from Webflow).
Nice info, Daniel! Help me a lot to discovery more about the impact of Figma
Thanks Daniel I am designer have designed everything pretty much like print, websites, and now mobil. Your explanation really makes it clear that they are divs, good to know having some coding background with HTML5 and Dreamweaver.
I am a beginner in the UX field but for some reason i never used groups and swore by frames, made my work much easier and more neat. This video helped out a lot, thank you!
Man, just the opening line was enough to make me change my workflow. As a Figma OG I used to draw rectangles, grouping etc. Thanks for explaining it
That was bloody awesome. I was looking for hours for a decent video to explain tables and auto layouts! A job well done and thank you â€ïž
Thank you so so much! Iâm so stoked i was able to help you out!
OH MY GOD!!!!! I have been frustrated and still can't get my head around after WATCHING COUNTLESS VIDEOS EXPLAINING AUTO LAYOUT BUT YOU EXPLAIN IT PERFECTLY WELL. YOU ARE THE BEST JESSE!!!!! THANK YOU SO MUCH. MUCH LOVE
Game changing AND amazing results from this tut + a Figma learning curve for a project at work. Thanks, Jesse!
Love the vibe you bring to this channel and the process, makes it easy to follow along. Nice one!
Thank you so so much for the support!
I'm just now starting to work with Figma and this video was more helpful than the one from the beginner's video from Figma. And your excitement is contagious! Thanks for sharing your knowledge :)
This is the most clear explanation and presentation I've heard for Auto-layout and Frames. ThX!
I have started my UI journey. I had a bit confused about auto layout but after this video all things are clear. Thank you so much
Huge thank you! You're making my design work so easy right now.
You are a super fun teacher, thanks so much, as time goes by, we all see Figma bypass them all. Thanks again Jesse, you are one of the bests out there.
Finally a tutorial that actually motivates me to learn. These are surprisingly rare so thanks a lot!!
Honestly
I love the way you explain things, that is adorable! Everything is clear and easy with you! Thanks a lot â€
Great video, Jesse! This auto-layout feature is indeed a game changer. After learning about it, I see no point in going with rigid layouts anymore. Auto-layouts coupled with multi-variant components (and the inheritance between them) basically allow building interfaces of any complexity.
OMG I can't believe that I have found a channel that explains exactly how to use auto layout. Your methodology is amazing đ
Good stuff right here! I love your tutorials man and the energy you bring while designing shows it's fun. Keep doing what you do
The video is truly helpful. I came here after watching a Figma tutorial and reading an article they have on auto layout but it was hard to follow. Your way of explanation is way easier and certainly more fun to watch.
This is about the best video on auto-layout out there. Thumbs up Jesse!
Thank you so much! The way you're explaining is fantastic!
Thanks for sharing; great video! Recently switched from Sketch to Figma and this was really helpful. One thing I did before this video was always make the background and include that in the auto-layout. Also making frames rather than groups seems way more powerful.
dude auto layout changed my entire approach to design, thank you brother.
Couldn't explain it any better. Thank you so much
A detailed but easy to understand explanation of auto layout, Thank you!
Thank you Brother! This was the first tutorial on Auto-Layout that didn't make my brain melt and was easy to follow.
Best auto-layout tut have seen so far!
Thank you so much for the kind words, Akinola!
That is one good tutorial for all the people new to auto layout!
Kudos to you for putting up such nice content!
so far, the best tutorial on Auto Layout to me. Great job Jesse!!!
Right on point. Excellent explanation. Not a single second gone to waste. Please keep up the good work.
This is amazing man, loved the way you explain everything, so easy to understand. Keep it coming and thank you so much for this :)
I just came across this video and this is by far the best explanation of auto layout. Thank you
subscribing to you coz this is the first video on auto-layout that is clearcut and makes sense! thanks!
My God, thank you so much. This is by far the simplest explanation of auto layout. I literally got it on one try
Wow, Auto Layout is totally game-changing. I've spent several hours on the boring alignment and then extra hours revising them. Now, Auto Layout saves my life.
can't explain how wonderful the video was.
I would like to thank you for the way you present information!!! Thank you! Thank you!
WOW!!! One of the best Figma videos, ever! Thank you and bravo!! *thumbs up*
Absolutely the best explanation around.
The best explanation about auto layout in Figma.
I was so confused about Auto Layout before watching your video! Thanks a ton :)
You do an excellent job. The energy you bring and your ability to teach are better than most Iâve seen. Thank you.
Wow, thank you! I appreciate that so much
He definitely has a talent, or at least a skill for breaking stuff down in a simple flow that's robust but not redundant. Which is harder to do than one might think. This guy should be working in UX.
Thanks for making this video! I recently have been using the Systemflow framework for Webflow which uses Auto Layout for everything....and being unfamiliar I was very confused until watching this video. Very clear and helpful explanation - thank you again!
Fantastic tutorial! The clearest explanation of auto layout I've stumbled across.
Thanks so so much!!
Thank you for helping me understand this powerful feature.
Your learning style is owesome thanks for this great tutorial!
Incredibly helpful! thank you so much!
Hi, from Indonesia. Thank you so much Sir, It's clear for me to be a beginner in UI/UX Designer.. Your explanation is easy to understand.
amazing, this changed completely my workflow with figma. thank you!
You are a life saver. Such a great way of teaching. Thank you so much for the content.
I have been learning UI/UX and this guy has been nothing but Amazing and Helpful⊠i love you brođ„ș
your lessons are really helpful, thank you.
Had to watch 3 videos to get it, but I think I finally got it, haha! Thanks man!!
Youâve got this, Nicolas!!
Love the video, man. Keep it up - these are very informative and inspiring! Your videos are all A+ đ
I agree this was such a great explanation of auto layout that I was not getting by watching the video tutorials from figma. Great job.
Thanks for sharing brah. Like your no nonsense tutorial and will follow. Keep'em coming!
You just blew my mind. Thanks Jesse
Amazing! Easy to follow & understand! Tysm!
Thanks, Ashes!!
fastest tutorial i have ever seen GOOD JOB BRO
Greatest figma auto layout tutorial ever!!!
Thank you for explaining the minute details of Auto Layout, Exactly what I was looking for!
Glad it was helpful!
I needed this. Thank you!
BeautifulïŒThank you Jesse!
This really helped. Well explained. Thanks a lot.
Super valuable video, clear and concise. Thanks a lot for making it, great job !
Btw, I really love the tone of your voice and your passion for explaining Auto Layout for us. Thanks, Jesse ^_^
you are my online UX mentor. Thank you so much!
Damn, you are so precise and clear. Great job!!!!
Awesome tutorial! Thanks Jesse
Thank you Figma for this needed feature and thank you Jesse for bringing this to my attention!
Youâre so so welcome, Kevin!
Thank you so much for your explaining.Love the energy !
Thanks for the very important and easy explanation. I got all the points. đ
No 20 min video with extra talk? Love it! straight to point thank you.
Well explained! Thank you Jesse
This is amazing. Thanks for explaining it so it's easy to understand đ.
You are amazing Jesse! Priceless knowledge here
Always good clips Sir, Thank you.
Clear and Crisp explanation bruh!!
Thanks man,
You made that complex topic vwry easyđ€đ€
awesome explanation...i finally understand how it's done
this is extremely helpful. you are a really great teacher. very good at teaching this somewhat complicated topic with the examples n everything
Just one video and I'm hooked.
great video man. great breakdown of such an immense tool that autolayout is. im just starting with figma and i realized that autolayout is something of HUGE value but im not good at using it, so this video was amazing. off to watch some more videos of yours
So helpful, thank you, you're a great teacher!
The first auto-layout video I realllyyyyy loved. So helpfull. Thanks Jesse.
Thanks so much, Stephanie!
omg thats amazing!! Im new to all of this, Im a UX / UI student and this is way ahead of what I've learnt just yesterday! Thanks for sharing!!! New follower here!