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.

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

[@vaiznavi]

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

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

[@majorbeats1775]

I subscribed because you went straight to the point! thanks

[@geometrydash8834]

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

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

[@travelledmatt3663]

Exactly what I was needing. Thank you!

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

[@pramodb3928]

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

[@Silicondesu-w1y]

Thank you my good sir, This was educative

[@BlueNovaBeats]

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

[@DarrenNorthcott]

Glad I could help

[@moeranyc]

Homie sounds like homelander giving a Figma lesson!

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

[@joshua0x]

Great video. Thanks for sharing!

[@IbrahimE]

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

[@Stedes97]

great video

[@PetrKanda]

Nice one

[@sylestra]

just perfect, thank you

[@r6506-ls5rz]

Thanks for sharing, Awesome as as usual

[@andres1814ap]

Great content!

[@Dhileep0382]

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

[@ignaciomartinez2102]

what a genius, thank you very much!!

[@PaigeKeefer]

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

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

[@xiaolian00]

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

[@DarrenNorthcott]

No problem 😊

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

[@asteria-ie3yg]

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

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

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

[@93vincentvalentine]

Thank you very much sir.

[@cherryayu2881]

nc tutorial!! Subed

[@galeelraglen]

Thank you :)

[@phill2]

5:26 Cant find Absolute Position 5:37 Cant find Fix Position when Scrolling Please advise?

[@adafavour8691]

go to prototype

[@adafavour8691]

under prototype chose position

[@BilalLoumghari]

And what about the expanding menu?

[@EmptycatArt]

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

[@youssefayman994]

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

[@herzetty]

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

[@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)"

[@blueblue1654]

Muchas gracias. Me has salvado :´333333

[@draggod2785]

for someone that just need make something is fixed or not just go to prototype and there is scrool behavior

[@thatnokgirl]

there's no longer fix position when scrolling ☹

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

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

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

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