Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial
HTML-код
- Опубликовано: 12 мар 2023
- 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!
Subscribe : / @darrennorthcott
Patreon: / darrennorthcott
Sign Up for Updates, Tips & Tricks : northcott.substack.com/
Download Figma: bit.ly/41F6yaS
#figma #figmatutorial #UX #stickynav #ui #design #smartanimate #navigation #appdesign
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 RUclips that made this super easy and simple. Thank you! Really appreciate it. Will be watching more of your videos.
Did u get any job? It's been 5m
Thank you for showing absolute positioning with that I could make constraints show up! It was really helpful.
Thank you. Thank you. Thank you. Such a great tutorial. I've been scratching my head about this for weeks.
Exactly what I was needing. Thank you!
Great tutorial man, no bs just straight to it. Cheers
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!
just what i've been looking for. Thank you!
I subscribed because you went straight to the point! thanks
Thank you for the info pill. Thanks to you, my designs will look more beautiful and lively.
Great video. Thanks for sharing!
Thank you my good sir, This was educative
what a genius, thank you very much!!
just perfect, thank you
Thank you :)
Thank you very much sir.
👨🏾🚀 Man thank you!!! Been trying to figure out how to do this for the longest!
Glad I could help
Great content!
Thanks for sharing, Awesome as as usual
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 !!!!
This helps me alot, thank you so much!!! ❤😢
No problem 😊
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.
nc tutorial!! Subed
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?
Mine too
Check it in the prototype side, they will be a text box to choose scroll behavior on the navbar and choose stick
@@tumomotlhabi2085 saw that they changed the location
yes. you can find the option to make it fixed on "prototype" side
@@erzst I only see the option for "Sticky (stay at top edge)" rather than a bottom sticky option
if I set it to fix position the nav bar disappears in prototype. what to do?
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?
Hey how did you do that? some settings are different from this video
Is there a way to make the bottom nav sticky if my frames are not in auto layout?
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?
Sir, can you put the video for this concept again? From scratch in this concept.
Muchas gracias. Me has salvado :´333333
The main artboard when I give it autolayout all things in it messed up what I do wrong ?
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??
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? :')
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.
Shouldn't... but with the latest release of Figma I have been noticing some strange issues that pop up, so it is possible
same here
Even after fixing it it getting fixed to frame and not bottom of it.. Anyone know how ti fix it?
2:19 if you've already designed a basic nav bar and are looking for guidance on the interactive work
what do i do if the fix position
button doesnt show up? does it need to be auto layout?
Shouldn't need to be. Under prototype there is a new fixed position UI
It doesn't seem to give me the option for fixed position when scrolling
Make sure if its in an autolayout container to select Absolute Position first
@@DarrenNorthcott Neither do I get the option, even when I put it on absolute position.. Any idea what I'm doing wrong?
@@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.
@@DarrenNorthcott cool. Thank you so much!
@@DarrenNorthcott I looked everywhere for the answer to this and of course it's in the comment section of a vid. Thanks!
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
make sure you have 'animate matching layers ' check on the prototype settings
"Fix positon when scrolling" is not there in my work space
you must go to the "prototype" section, select "position” and put "Fixed (stay in place)"
I don't see the button for "fix position when scrolling" What did I do wrong?
It has moved under the prototype tab
For some reason, on my FIGMA I don't have the option of "fix position when scrolling" 😭
It's moved to the prototyping tab
@@DarrenNorthcott oh I found, thank you so much ♥️
Sorry sir, your voice's interrupting