Can Figma Do THIS? (It Changes When You Scroll)
Вставка
- Опубліковано 9 кві 2023
- Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
In this video we’re going to try to figure out if you can create a sticky navigation bar with anchors and changing states based on where you scroll in Figma. Basically a scroll-dependent sticky navigation (navbar). We will be using the sticky (stay on the top edge) scroll behavior and other prototyping / interaction tools in Figma.
The video I'm mentioning: • AMAZING Update From Fi...
how to create a sticky navigation bar with anchors and changing states (based on your scrolling) in figma - prototyping ux / ui figma tutorial for beginners
--------
© 2023 Mavi Design - Навчання та стиль
You provided such a clear explanation that made understanding these complex conditions so effortless. Kudos!
I was stuck in this process and was not able to find any solutions but this video made it very easy. Thank you so much for the amazing videos.😍😍😍
Thank you so much! I am attempting to create a monthly calendar that can horizontally scroll and the name of the Month will also change when the new month is visible (3/4) of it on the screen. This is a great start. The only I got the prototype to work was having each of the frames named the same.
Brilliant! Thank you so much for this clear and simply to the point explanation of this complex prototype solution. Wish you all the best and great continuation! :D
Nice tutorial, mate. Have you figured out how to change the navbar properties such as top/bottom padding, just like airbnb for example?
Amazing brother ❤ this helps me a lot
Thank you so much man, it really helped me a lot
Great video, it was very helpful.
Awesome, Just I needed!
Thank you for sharing
I've tried doing this but couldn't figure it out. Thanks for the vid
Hope they add axis coordinate detection trigger. That would be a killer feature I swear.
Love these videos!! Keep it up
How about using a scroll variable to change the component variant? Can that be done?
Can you make the prototype with updated Prototype option. Would be superhelpful.
can we do the same thing in Elementor...please help
Is it possible to have a navigation that changes on scroll say you wan the full logo on the top and as you scroll its just the logo icon? I know you can do this in Adobe Xd
I wondered if you can set this up with some conditional logic relative to the prototype scroll state in variables.. Looks like this is the easiest way.
Any idea how to do this in vertical nav. Scrolling and changing nav list item is working well but on click of list item on interaction scroll to there is issue of list item selection . Idk if you got my point 😅
But line in nav bar doesn't change after click
That's interesting but is forming to create different pages. What about a complex project with many pages?
everything works fine when the navbar goes down, but when I click on any tab in the navbar the page changes, unfortunately the navbar does not change. The selected section does not appear. But when I move the cursor down the blue cursor is on the top of the next page. I guess I didn't get the fields of the sections right, what can I do about it?
If all tutorial videos had this level of communication with topical subject matter I would have already been a millionaire years ago.. I just subscribed, thank you.
Your video is amazing, its so helpful... but you should improve your audio quality
Well done. but wish there was no tradeoff
Can you have this same interaction on mobile?
Yes
I kind of figured it out. I used the "mouse up" interaction instead of "mouse enter". Sometimes it glitches on transition a bit but otherwise it works (Figma problem, not your prototype). If you preview it on desktop you have to drag with you mouse instead of scroll to get the same effect as on mobile.
Great idea but Figma is absurd that we need to take that much effort to recreate a simple animation.
Why is my version just flashing? I copied exactly your instructions...
Same did you figured out what is problem ?
@@Hygge2921 your layers are probably not named properly. they have to have the same name and also the same layer order
@@chiyonie hey thanks i fixed it
@@Hygge2921 ohh glad to hear that!!!
@@chiyonie Thank you!
рабочий костыль ... простите уж
Why is this so painful!? It's been part of the web for over a decade.
Figma really sucks 🤣🤣 I switched to Framer for a while.
com'on Figma, stop wasting time on UI updates and build in basic proto scroll position do x functionality.