Figma Auto Layout | Getting Started with Auto Layout
Вставка
- Опубліковано 2 чер 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
The best explanation of auto layout I’ve seen in youtube👌🏼
Wow, thanks!
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 .
Your explaining is perfect! Good example
Let's auto layout inside auto layout which is inside auto layout with some auto layout inside! Love it!
Best auto-layout tut have seen so far!
Thank you so much for the kind words, Akinola!
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
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!
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.
Game changing AND amazing results from this tut + a Figma learning curve for a project at work. Thanks, Jesse!
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!
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.
Huge thank you! You're making my design work so easy right now.
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!
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
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!
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 love the way you explain things, that is adorable! Everything is clear and easy with you! Thanks a lot ❤
Had to watch 3 videos to get it, but I think I finally got it, haha! Thanks man!!
You’ve got this, Nicolas!!
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!
This is amazing man, loved the way you explain everything, so easy to understand. Keep it coming and thank you so much for this :)
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
The most legit tutorial to date.
This is about the best video on auto-layout out there. Thumbs up Jesse!
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.
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.
Right on point. Excellent explanation. Not a single second gone to waste. Please keep up the good work.
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
so far, the best tutorial on Auto Layout to me. Great job Jesse!!!
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!
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.
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!
A detailed but easy to understand explanation of auto layout, Thank you!
This has to be the best and most straight forward auto layout tutorial I've seen.
Love the video, man. Keep it up - these are very informative and inspiring! Your videos are all A+ 👌
This is the most clear explanation and presentation I've heard for Auto-layout and Frames. ThX!
That is one good tutorial for all the people new to auto layout!
Kudos to you for putting up such nice content!
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.
Thank you so much! The way you're explaining is fantastic!
WOW!!! One of the best Figma videos, ever! Thank you and bravo!! *thumbs up*
Couldn't explain it any better. Thank you so much
Absolutely the best explanation around.
You are a life saver. Such a great way of teaching. Thank you so much for the content.
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
OMG I can't believe that I have found a channel that explains exactly how to use auto layout. Your methodology is amazing 👏
Fantastic tutorial! The clearest explanation of auto layout I've stumbled across.
Thanks so so much!!
subscribing to you coz this is the first video on auto-layout that is clearcut and makes sense! thanks!
Thanks for sharing brah. Like your no nonsense tutorial and will follow. Keep'em coming!
The best explanation about auto layout in Figma.
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 :)
dude auto layout changed my entire approach to design, thank you brother.
Thank you Brother! This was the first tutorial on Auto-Layout that didn't make my brain melt and was easy to follow.
Super valuable video, clear and concise. Thanks a lot for making it, great job !
Beautiful！Thank you Jesse!
Finally a tutorial that actually motivates me to learn. These are surprisingly rare so thanks a lot!!
Honestly
I just came across this video and this is by far the best explanation of auto layout. Thank you
amazing, this changed completely my workflow with figma. thank you!
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
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.
I was so confused about Auto Layout before watching your video! Thanks a ton :)
I would like to thank you for the way you present information!!! Thank you! Thank you!
can't explain how wonderful the video was.
Thank you for helping me understand this powerful feature.
You just blew my mind. Thanks Jesse
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
I needed this. Thank you!
Greatest figma auto layout tutorial ever!!!
fastest tutorial i have ever seen GOOD JOB BRO
Your learning style is owesome thanks for this great tutorial!
Amazing! Easy to follow & understand! Tysm!
Thanks, Ashes!!
Awesome tutorial! Thanks Jesse
you are my online UX mentor. Thank you so much!
This is legiiit!!!! 🤯🤯🤯
Thank you! This is really motivating!
Thank you for explaining the minute details of Auto Layout, Exactly what I was looking for!
Glad it was helpful!
Thank you so much for your explaining.Love the energy !
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.
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.
Clear and Crisp explanation bruh!!
This is amazing. Thanks for explaining it so it's easy to understand 👍.
Btw, I really love the tone of your voice and your passion for explaining Auto Layout for us. Thanks, Jesse ^_^
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.
I have been learning UI/UX and this guy has been nothing but Amazing and Helpful… i love you bro🥺
Well explained! Thank you Jesse
Combining the power of Autolayout and the flexibility of Variants is pushing Figma to the top! I would love to see your take on that combo, and best practices as well.
Damn, you are so precise and clear. Great job!!!!
You are amazing Jesse! Priceless knowledge here
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!
Extremely helpful video short and to the point. Great video presentation.
Jess, thank you for this man! Super easy to follow!
So stoked i was able to help you out, Luis!
My God, thank you so much. This is by far the simplest explanation of auto layout. I literally got it on one try
Great tutorial! Thank you
Always good clips Sir, Thank you.
This really helped. Well explained. Thanks a lot.
No 20 min video with extra talk? Love it! straight to point thank you.
The first auto-layout video I realllyyyyy loved. So helpfull. Thanks Jesse.
Thanks so much, Stephanie!
this is extremely helpful. you are a really great teacher. very good at teaching this somewhat complicated topic with the examples n everything
So helpful, thank you, you're a great teacher!