Figma Auto Layout | Getting Started with Auto Layout

🏆 //////////// Join this channel to get access to perks:

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

🤝 //////////// Looking for 1:1 mentorship or feedback on your portfolio?

👋 ////////// Connect with me here

📫 ////////// Sign up for my Monthly Newsletter

------------------------------------------------------------------------------------

💻 ////////// I host all my websites with Hostinger

🎵 ////////// Elevate your videos with record-label quality music from Musicbed

📸 ////////// The Equipment I use

[JesseShowalter]

How can you start using Auto Layout in your projects?

[frogturtle]

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

[tuong]

I am a Junior UX Designer and I really love the way to talk and explain stuff. You are an amazing man, keep going!

[topemeister]

The clearest explanation of Auto Layout I've seen. You smashed it, Jesse! Cheers

[ArdDanielN]

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).

[aceadewaleedits]

This is the first video where I really felt like I understood what was happening. Thankful for this!

[celeste.]

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.

[prasojoaziz]

OH MY 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 THANK YOU SO MUCH. MUCH LOVE <3

[jherem]

Your explaining is perfect! Good example

[TwinkleToes_]

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.

[hiimhuaqi]

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.

[hollowio]

dude auto layout changed my entire approach to design, thank you brother.

[telher]

This has to be the best and most straight forward auto layout tutorial I've seen.

[kellegbert]

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 :)

[vaishnavipahari]

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

[mimkaf]

The best explanation of auto layout I’ve seen in youtube👌🏼

[CW-jckl]

You do an excellent job. The energy you bring and your ability to teach are better than most I’ve seen. Thank you.

[liamkavanagh]

Finally a tutorial that actually motivates me to learn. These are surprisingly rare so thanks a lot!!

[favouruzie]

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

[herbertnondo]

Well explained, couldn't figure out how to use it until watching this video. Thanks!