Figma tutorial: Auto layout navigation menu

Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we'll teach you more advanced Auto Layout techniques to create a navigation menu using the button we created in the previous video.

Learn more on our Help Center:

Timestamps:
0:00 Auto-Layout For Navigation Menus
0:20 Creating List Item
0:40 Creating A Row
0:50 Space Between Property
1:07 Direction Property
1:27 Adding Another List Item
1:41 Adding A New Item
2:03 Changing An Item's Position
2:26 Adding An Avatar
2:45 Hiding The Avatar
3:35 Adding The Logo
3:44 The Tripma Design File
4:01 Alignment Flyout Menu
4:24 Changing to Fixed Width
5:01 Changing from Packed to Space Between
5:52 Adjusting The Padding
6:01 Using The Design
6:19 Constraints and Resizing Properties
7:00 Conclusion
7:13 The Next Video
7:21 The Tripma Design File

#Figma #FigmaTutorial #AutoLayout

Music:
Mitsubachi by Smith The Mister

[Figma]

We announced some new updates for auto layout at #config2022.

[spicehaven]

Man, after spending hours trying to figure this auto layout feature out, I finally come to an understanding. I'm fairly new to figma and design, and this video is super duper valuable. Though I've watched it more than 10 times, but now I'm starting to get confident. I appreciate the upload guys.

[mrbrownjeremy]

Awesome, powerful, and easy to use functionality—thanks! Quick note: from a beginner's perspective, it feels like you skipped some important steps starting at 0:37 .

[evilballer]

amazing, finally! love figma. though without auto layout it used to be a mess with nested objects which now can be done by using just one or a few

[maskman]

Thank you so much for this useful and practical tutorial, Ive learned a lot, auto layout feature really makes life so much easier !!!

[camali_ch]

WHAT! That 0% opacity/toggle layer visibility trick to hide items is genius! I hadn't thought of simply making a component completely transparent to make it disappear while retaining the size and shape 🤯

Thank you, thank you, thank you!

[hihi]

Loved it!! I had to play it on 75% speed, but learned tons! And thank you for the source file as I used it to grab the avatar to practice.

[pvbee]

I switched to Figma a year ago. That was a good decision :)

[santi]

auto layout just changed my life so much, love u figma

[glendanascimento]

Dude, this is the only video that works. Thanks for posting!

[giovanniserralde]

We need the next chapter of this serie !!!! :)

[jamesgig]

awesome. I really love this. kindly discuss next how a transition splash screen works

[a.skapil]

Just started using Figma. Mindblowing app!!!

[ndutasamwa]

Amazing. I bought courses on Udemy which didn't even help. This is gold!

[erichepperlewp]

Excellent Figma #autolayout tutorial for nav! I think I can figure out how to simulate 3 column list items with auto layout ... off I go to try it!

[anoobis]

Very cool, it would be great to see your next video, also would like to see how it handles bottom part of website (footer)

[Troy-olfk]

Wow I never noticed there is a 'space between' option, thank you

[thiyenchinguyen]

Very useful . Thanks for your tutorial ^^

[nathalypestana]

I had to watch this twice BUT I DID IT! lol thank you!

[rajasubburaman]

Awesome and Impact Tutorials ....Neat and Clean Explanation👋👋👋