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

[@annasergeevna1011]

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 KZbin that made this super easy and simple. Thank you! Really appreciate it. Will be watching more of your videos.

[@cherryayu2881]

Did u get any job? It's been 5m

[@2rockintwins]

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

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

[@simisolaodukomaiya151]

Mine too

[@tumomotlhabi2085]

Check it in the prototype side, they will be a text box to choose scroll behavior on the navbar and choose stick

[@simisolaodukomaiya151]

@@tumomotlhabi2085 saw that they changed the location

[@erzst]

yes. you can find the option to make it fixed on "prototype" side

[@herzetty]

@@erzst I only see the option for "Sticky (stay at top edge)" rather than a bottom sticky option

[@vaiznavi]

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

[@monsieurm2904]

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

[@pramodb3928]

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

[@geometrydash8834]

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

[@abigailisek8810]

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?

[@alethom_]

Hey how did you do that? some settings are different from this video

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

[@Dhileep0382]

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

[@carry8393]

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.

[@majorbeats1775]

I subscribed because you went straight to the point! thanks

[@DeekshithSuresh-eo4oe]

that absolute position button is responsive to the 'Hillside home' autolayout frame screen? suppose if page is resposive, absolute position button will be responsive too?

[@travelledmatt3663]

Exactly what I was needing. Thank you!

[@PaigeKeefer]

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

[@milesofwhite]

It doesn't seem to give me the option for fixed position when scrolling

[@DarrenNorthcott]

Make sure if its in an autolayout container to select Absolute Position first

[@wisssse]

@@DarrenNorthcott Neither do I get the option, even when I put it on absolute position.. Any idea what I'm doing wrong?

[@DarrenNorthcott]

@@wisssse Alright, so what's happened is with the new Figma Update, they moved this option under the Prototype Tab -> Scroll Behaviour -> Fixed. Ugh. Updates.

[@wisssse]

@@DarrenNorthcott cool. Thank you so much!

[@scrump8424]

@@DarrenNorthcott I looked everywhere for the answer to this and of course it's in the comment section of a vid. Thanks!

[@derrickdartey721]

Thank you my good sir, This was educative

[@asteria-ie3yg]

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

[@IbrahimE]

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

[@BlueNovaBeats]

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

[@DarrenNorthcott]

Glad I could help

[@sylestra]

just perfect, thank you

[@venomca_]

hello ive been struggling with mine bcus everytime i transition to another frame, the whole frame with the bottom nav bar transitions and not just the line, how can i fix this? :')

[@Akr9836]

"Fix positon when scrolling" is not there in my work space

[@tamilakovalenko9661]

you must go to the "prototype" section, select "position” and put "Fixed (stay in place)"

[@herzetty]

2:19 if you've already designed a basic nav bar and are looking for guidance on the interactive work

[@ignaciomartinez2102]

what a genius, thank you very much!!

[@youssefayman994]

The main artboard when I give it autolayout all things in it messed up what I do wrong ?

[@joshua0x]

Great video. Thanks for sharing!

[@xiaolian00]

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

[@DarrenNorthcott]

No problem 😊

[@sinayagubi8805]

That\s not sticky. that's fixed. if you could scroll past it if you went far enough down the page that would be sticky bottom

[@andres1814ap]

Great content!

[@jiula7496]

Thank you for sharing. I have a question: If I use the "fixed" option in the prototyping tab, will the animation of the bottom bar be broken? because it is not working when i view on the present.

[@DarrenNorthcott]

Shouldn't... but with the latest release of Figma I have been noticing some strange issues that pop up, so it is possible

[@alethom_]

same here

[@galeelraglen]

Thank you :)

[@93vincentvalentine]

Thank you very much sir.

[@pigeonanimations6118]

what do i do if the fix position button doesnt show up? does it need to be auto layout?

[@DarrenNorthcott]

Shouldn't need to be. Under prototype there is a new fixed position UI

[@Mrbergmann]

Everything works for me except the small line stays put under the home icon, i did all the components and selected the asset i wanted on the second screen

[@DarrenNorthcott]

make sure you have 'animate matching layers ' check on the prototype settings

[@danielr3085]

I don't see the button for "fix position when scrolling" What did I do wrong?

[@DarrenNorthcott]

It has moved under the prototype tab

[@cherryayu2881]

nc tutorial!! Subed

[@blueblue1654]

Muchas gracias. Me has salvado :´333333

[@tertulianoxoxo]

For some reason, on my FIGMA I don't have the option of "fix position when scrolling" 😭

[@DarrenNorthcott]

It's moved to the prototyping tab

[@tertulianoxoxo]

@@DarrenNorthcott oh I found, thank you so much ♥️

[@RahaPlus]

Sorry sir, your voice's interrupting

[@r6506-ls5rz]

Thanks for sharing, Awesome as as usual

[@victoronwualu3994]

just what i've been looking for. Thank you!

[@ajaydugamer6433]

But this things is not happing in a flow. Like On tap on icon its going to other screen but the icon didn't change its colour while doing so. What should I do??