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/...
Install the Blush plugin:
www.figma.com/...
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.g...

[@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!!

[@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.

[@JordacheB]

Another clearly explained tutorial from Pablo. Thank you!

[@marie91999]

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

[@collinsk8754]

Great stuff, as always.

[@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!

[@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!

[@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.:-)

[@andresmatonti]

Awesome Pablo! You rock man!!! Thanks!

[@kiwiandmoon]

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

[@iremharnak]

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

[@georgedyakov7774]

Immensely helpful! Huge thanks from Russia, Pablo!

[@agustinfernandez5688]

Thanks for sharing this tutorial, pretty easy to use!

[@antoineyoutube527]

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

[@lauraflorez1319]

Thanks for share this with us, really helpful!

[@kateprescesky3060]

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

[@djlilcq]

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

[@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!

[@Cifero-d5m]

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

[@amanbekdos912]

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

[@3merror492]

thanks for sharing your knowledage with us

[@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!

[@saraalshimi7949]

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

[@TiagoRosa]

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

[@SketchTogether]

Legend! Thanks, Tiago 👊

[@verawat]

You tutorial look good that i never seen befor. Thank

[@clairemounier1994]

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

[@achuchisaku]

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

[@PixelNP]

Nicely explained.. thank u very much

[@framerprojects]

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

[@AnthonyNicholson]

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

[@PatriciaOcso]

Thank you so much! :)

[@aleksi5835]

*Learned a lot in this video thanks*

[@mangosday]

Super helpful!

[@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 🙌

[@alvin_lal]

thanks , this was very helpful

[@rbnplgrm]

Pablo you rocks!

[@luismoreno7540]

Gracias amigo.

[@gaodi8506]

thank you !

[@lovejko]

Gracias!

[@thegamingtoday]

genial Pablito! gracias!

[@nikagrdzelishvili21]

man you are really great

[@samudragupta1733]

Pablo you da man! Great tutorial! :)

[@polinakrg6566]

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

[@RckDtar]

thanks this helped me

[@dumidupramith3881]

thanks

[@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?

[@mateuszb4387]

long story short: that's very cool!

[@cjoyceheart]

Thank you!! :)

[@tadswiech3043]

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

[@avinashnarayanan9407]

Yay!

[@SketchTogether]

Aww yissss!

[@fajleyrabbe2930]

Helpful!!

[@tadswiech3043]

the best

[@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.

[@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.

[@explosiveme2673]

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

[@ubaidullahzahid1308]

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

[@storytimekids123]

how to auto-layout 8k width in figma?

[@dimitrischronopoulos7756]

8px like for video!!!

[@SlayWithSona]

Very well explained