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
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 .
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
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!
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!
Wow, this is life changing. I have used auto layout a bit, but the way you "laid out" the info in this tutorial is going to make a material difference in my product's UI. Thank you!
Your explaining is perfect! Good example
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 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!
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!
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.
This has to be the best and most straight forward auto layout tutorial I've seen.
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.
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
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.
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
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.
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
Game changing AND amazing results from this tut + a Figma learning curve for a project at work. Thanks, Jesse!
I love the way you explain things, that is adorable! Everything is clear and easy with you! Thanks a lot ❤
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.
Huge thank you! You're making my design work so easy right now.
This is the most clear explanation and presentation I've heard for Auto-layout and Frames. ThX!
so far, the best tutorial on Auto Layout to me. Great job 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
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!
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
dude auto layout changed my entire approach to design, thank you brother.
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!
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 :)
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.
OMG I can't believe that I have found a channel that explains exactly how to use auto layout. Your methodology is amazing 👏
Finally a tutorial that actually motivates me to learn. These are surprisingly rare so thanks a lot!!
Honestly
A detailed but easy to understand explanation of auto layout, Thank you!
Right on point. Excellent explanation. Not a single second gone to waste. Please keep up the good work.
I just came across this video and this is by far the best explanation of auto layout. Thank you
That is one good tutorial for all the people new to auto layout!
Kudos to you for putting up such nice content!
You are a life saver. Such a great way of teaching. Thank you so much for the content.
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.
This is amazing man, loved the way you explain everything, so easy to understand. Keep it coming and thank you so much for this :)
amazing, this changed completely my workflow with figma. thank you!
Love the video, man. Keep it up - these are very informative and inspiring! Your videos are all A+ 👌
I have been learning UI/UX and this guy has been nothing but Amazing and Helpful… i love you bro🥺
My God, thank you so much. This is by far the simplest explanation of auto layout. I literally got it on one try
Thank you so much! The way you're explaining is fantastic!
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 agree this was such a great explanation of auto layout that I was not getting by watching the video tutorials from figma. Great job.
Thank you so much for your explaining.Love the energy !
I was so confused about Auto Layout before watching your video! Thanks a ton :)
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
Absolutely the best explanation around.
Thanks for sharing brah. Like your no nonsense tutorial and will follow. Keep'em coming!
Your learning style is owesome thanks for this great tutorial!
Super valuable video, clear and concise. Thanks a lot for making it, great job !
This is about the best video on auto-layout out there. Thumbs up Jesse!
The best explanation about auto layout in Figma.
Thank you for helping me understand this powerful feature.
Best auto-layout tut have seen so far!
Thank you so much for the kind words, Akinola!
Thank you Brother! This was the first tutorial on Auto-Layout that didn't make my brain melt and was easy to follow.
This is amazing. Thanks for explaining it so it's easy to understand 👍.
subscribing to you coz this is the first video on auto-layout that is clearcut and makes sense! thanks!
I would like to thank you for the way you present information!!! Thank you! Thank you!
Couldn't explain it any better. Thank you so much
can't explain how wonderful the video was.
WOW!!! One of the best Figma videos, ever! Thank you and bravo!! *thumbs up*
this is extremely helpful. you are a really great teacher. very good at teaching this somewhat complicated topic with the examples n everything
Incredibly helpful! thank you so much!
Thank you for this, I feel that I love you, the best explanation that I have seen on auto layouts!
Greatest figma auto layout tutorial ever!!!
you are my online UX mentor. Thank you so much!
I love this great tutorial! Thanks for your help 👌🏽
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.
So helpful, thank you, you're a great teacher!
I needed this. Thank you!
Btw, I really love the tone of your voice and your passion for explaining Auto Layout for us. Thanks, Jesse ^_^
fastest tutorial i have ever seen GOOD JOB BRO
This really helped. Well explained. Thanks a lot.
No 20 min video with extra talk? Love it! straight to point thank you.
Fantastic tutorial! The clearest explanation of auto layout I've stumbled across.
Thanks so so much!!
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!
Thank you for explaining the minute details of Auto Layout, Exactly what I was looking for!
Glad it was helpful!
Thanks for the very important and easy explanation. I got all the points. 😊
You just blew my mind. Thanks Jesse
Clear and Crisp explanation bruh!!
Thank you for your explanation!
Thank you Figma for this needed feature and thank you Jesse for bringing this to my attention!
You’re so so welcome, Kevin!
Damn, you are so precise and clear. Great job!!!!
thanks! your explanation is perfect.
This is legiiit!!!! 🤯🤯🤯
Thank you! This is really motivating!
Thank you! This is awesome!!
Thanks for helping auto, definitely helped me a lot with all the concepts that I need to start playing a little bit more with figma
You’ve got this, Marcus!
The most legit tutorial to date.
Thanks man,
You made that complex topic vwry easy🤗🤗
awesome explanation...i finally understand how it's done
WOW Thank you ! I get it now !! This video is the best
THIS WAS AWESOME!!!!!!!!
Thank you so much!!!
Just one video and I'm hooked.
perfect explained, thanks! it totally will change the way I work :)