Flexible Nav Bar with Auto Layout - Figma Crash Course

Let's design a navbar for a site using Figma's auto layout. We'll add a logo pinned to the left, with menu actions, an expandable search bar, and menu options on the right, in a responsive design!
Duplicate the file:
www.figma.com/community/file/...
Install the Blush plugin:
www.figma.com/community/plugi...
Auto Layout Crash Course Playlist:
• Figma's Auto Layout
This is part of a crash course on Figma's auto layout.
Hey! If you're into what you've seen and want to explore even more, check out our 'Master Gorgeous UI Design' course. This is the last chance to get a discounted price on the course: pablostanley.gumroad.com/l/ui...

[@Underhills]

Nuthing automatic with this. Hell, you need to really go to work with tons of manual labor to get the so called auto layout working. Having said that I enjoyed the tutorial, probably the best on this topic around. Thanks for sharing.

[@DebolinaGuhaPatra]

Thank you so much!!! I couldn't get my head around the auto-layout feature, but you made it soooo simple!!

[@kateprescesky3060]

Thank you so much for putting together this course, I feel like I finally get it :)

[@collinsk8754]

Great stuff, as always.

[@marie91999]

Thanks Pablo! I can finally wrap my head around auto layout - a big thanks to you!

[@andresmatonti]

Awesome Pablo! You rock man!!! Thanks!

[@iremharnak]

This is so cool! Just like Flexbox! Thank you for the fun tutorials!

[@AnthonyNicholson]

This was so helpful, thank you so much for making this!!!

[@MarioInghilleri]

I love this Crash Course! Thank you Pablo, awesome work. Keep going! 💪

[@djlilcq]

Thanks for making this type of content Pablo! Learning a lot from the course.

[@achuchisaku]

Thanks, Pablo, this awesome! love your tutorials and videos so much!! Keep up the good work!

[@agustinfernandez5688]

Thanks for sharing this tutorial, pretty easy to use!

[@clairemounier1994]

Thank you so much for all your videos, your channel is amazing and very helpful 🤩

[@amanbekdos912]

Thank you! Great tutorial. Wait so long for the next chapters until next year)))

[@JordacheB]

Another clearly explained tutorial from Pablo. Thank you!

[@saraalshimi7949]

Amazing video! love your spirit! super helpful! Thank you!

[@annabartosiewicz5214]

Wow! What a great explanation! Thank you very much! I was looking for a good material for a long time and finally I found your video! It was really a pleasure to watch it!

[@lauraflorez1319]

Thanks for share this with us, really helpful!

[@LizzAngelus]

wow great tutorial!! you explain it in such a way that its easy to follow. im very new to autolayout and theres much to cover and youve done an amazing job. Thanks!

[@antoineyoutube527]

Amazing ! I am new to Figma. I know about Sketch but Figma looks more intuitive imo. Thanks for the great course

[@goncalotex]

Glad to have found your channel! Pretty good info and very well explained 👏🏻👏🏻 I just feel like you forgot to show at the end how auto layout makes it super easy to add more menu links and buttons without any effort!

[@kiwiandmoon]

Love your videos 😍 you make things so clear to understand. Way Better than the tutorials that figma make!!! 🤗 Thanks for making these.

[@SuperFrooty]

What a journey from Sketch to InVision to Figma. I marvel daily at what the Figma team have done that is so far and beyond the other UI design tools. It really is the closest integration between design and development and auto-layout (Flexbox) is the key.

[@aniketjoshi7518]

very nicely and simply explained. I got the auto layout fully by practicing your 2 videos. thanks for such videos and a simple explanation.:-)

[@georgedyakov7774]

Immensely helpful! Huge thanks from Russia, Pablo!

[@aleksi5835]

*Learned a lot in this video thanks*

[@verawat]

You tutorial look good that i never seen befor. Thank

[@samudragupta1733]

Pablo you da man! Great tutorial! :)

[@alvin_lal]

thanks , this was very helpful

[@mangosday]

Super helpful!

[@PixelNP]

Nicely explained.. thank u very much

[@3merror492]

thanks for sharing your knowledage with us

[@rbnplgrm]

Pablo you rocks!

[@TiagoRosa]

Awesome video man! I’m Still half way through it, but had to stop already to drop this comment 👊🏻

[@SketchTogether]

Legend! Thanks, Tiago 👊

[@nikagrdzelishvili21]

man you are really great

[@PatriciaOcso]

Thank you so much! :)

[@thegamingtoday]

genial Pablito! gracias!

[@gaodi8506]

thank you !

[@AlexandreJolly]

Thank you, very useful! Hope that Figma will add a "max-width" to auto layout, it would be awesome 😍

[@SketchTogether]

That would be cool! I have wondered that too. A min and max width and height would be dope!

[@luismoreno7540]

Gracias amigo.

[@JS2123-m9x]

Starting this right now, thanks mate~

[@SketchTogether]

Hell yeah! Hoping you find it useful, Junio :)

[@JS2123-m9x]

@@SketchTogether the last 3 were amazing, so yup! Saved me plenty of time and Monday I’ll implement everything in actual work files 🙌

[@RckDtar]

thanks this helped me

[@lovejko]

Gracias!

[@cjoyceheart]

Thank you!! :)

[@dumidupramith3881]

thanks

[@fajleyrabbe2930]

Helpful!!

[@mateuszb4387]

long story short: that's very cool!

[@tadswiech3043]

the best

[@polinakrg6566]

Cool tutorial! Thank you. What font were you using?

[@framerprojects]

Nice Tutorial! You could have done the nav-buttons with variants.

[@IrfanRosandi]

Nice tutorial Pablo, thanks. I am curious, when you design a web, what screen size do you design it for? what is the width of the frame? is it 1440 px, 1280px? and why you choose that size?

[@tadswiech3043]

Perfect, but could you show haw to made dropdown Menu ???

[@avinashnarayanan9407]

Yay!

[@SketchTogether]

Aww yissss!

[@ubaidullahzahid1308]

Hello, How you color inside the picture do you use any plugin or you make picture own your own

[@imjawads]

How about optimizing the same navigation for mobile resolutions?

[@baguztsetiawan3614]

Hi, now i always use group ctrl+g for the group my object. if now I use only ctrl+a for auto layout on my all object, is this possible and good? Thanks!

[@srdjan.despic]

Always use Frames to group what you want. To turn your selection into a frame, select everything you want to group > use shortcut "Ctrl+Alt+G". Use this shortcut because you wont need auto layout in every scenario so it is better to first turn it into a frame and later add auto layout if needed.

[@explosiveme2673]

How to export the whole thing for it to work like in browser ?

[@storytimekids123]

how to auto-layout 8k width in figma?

[@TheKaps3l]

Ok, now I know how to build navbar with auto layout but why should I do this instead of making just a group? What are the main advantages?

[@anitius101]

Autolayout allows you to create responsive designs that adapt to any screen/frame size. The surrounding elements also adapt to the inside, for example the width of a button changes to the amount of text it has inside of it, that is a huge time-saver. You can also use AL to replace elements, say one icon for another. Groups don't allow any of this, if you expand or reduce a group every element just gets distorted. You can only do equal spacing and that's about it. I recommend watching the Figma channel tutorial: Autolayout (8min) this tutorial is old and its slightly different than the actual Figma Ui, but it's very enlightening.

[@dimitrischronopoulos7756]

8px like for video!!!

[@SlayWithSona]

Very well explained