Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial

In this Figma tutorial, we will create a bottom navigation bar that sticks as your scroll (in auto layout) and animates selected states between screens!

#figma #figmatutorial #UX #stickynav #ui #design #smartanimate #navigation #appdesign

[rockintwins]

Thank you. Thank you. Thank you. Such a great tutorial. I've been scratching my head about this for weeks.

[annasergeevna]

Just subscribed! I have been on my own UX UI journey for a while, trying to expand my portfolio so I can get a better job. You are the first person on YouTube that made this super easy and simple. Thank you! Really appreciate it. Will be watching more of your videos.

[vaiznavi]

Thank you for showing absolute positioning with that I could make constraints show up! It was really helpful.

[geometrydash]

Great tutorial man, no bs just straight to it. Cheers

[monsieurm]

Oh god ! 10 years I hope finally do this footer sticky bottom ! Thank you so much ! Response = (Main Frame > Auto-Layout) + (Navbar Footer Frame > Absolute Position ) + Prototype Fixed to the end of the Main Frame !!!!

[majorbeats]

I subscribed because you went straight to the point! thanks

[travelledmatt]

Exactly what I was needing. Thank you!

[josh_ux]

Thank you so much for making this tutorial! I was dying trying to figure out how to make this work with auto layout. Thanks again!

[memelord-wy]

Thank you my good sir, This was educative

[BlueNovaBeats]

👨🏾‍🚀 Man thank you!!! Been trying to figure out how to do this for the longest!

[IbrahimE]

Thank you for the info pill. Thanks to you, my designs will look more beautiful and lively. <3

[eldowns]

When I attempt to lock the position of the nav bar, my Constraints section does not show the "Fix position when scrolling". Could I have done something wrong, or has that option gone away/somewhere else?

[abigailisek]

Thank you so much Darren. I've been struggling with the nav bar for weeks. Lots and lots of youtube tutorials, not knowing that figma changed the settings. After searching and searching for answers, I eventually got it from the comment section. Darren please, can you update this video so people can follow through?

[xiaolian]

This helps me alot, thank you so much!!! ❤😢

[pramodb]

if I set it to fix position the nav bar disappears in prototype. what to do?

[carry]

Thank you for explaining things so clearly, it's really easy to understand! Is there any way of doing this with the new FIGMA update? When I try to do the same steps in the Prototype section, the menu just stays at the bottom and then if I try to hover over it it will go all over the place. It's kind of a mess.

[r-lsrz]

Thanks for sharing, Awesome as as usual

[asteria-ieyg]

Even after fixing it it getting fixed to frame and not bottom of it.. Anyone know how ti fix it?

[Dhileep]

Sir, can you put the video for this concept again? From scratch in this concept.

[PaigeKeefer]

Is there a way to make the bottom nav sticky if my frames are not in auto layout?