Can Figma Do THIS? (It Changes When You Scroll)

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.

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

[nikyabodigital]

Hope they add axis coordinate detection trigger. That would be a killer feature I swear.

[tilakkamkar]

You provided such a clear explanation that made understanding these complex conditions so effortless. Kudos!

[lachicaSVT]

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.

[anushijain]

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.😍😍😍

How about using a scroll variable to change the component variant? Can that be done?

[andreeabottyan]

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

[vivek]

Can you make the prototype with updated Prototype option. Would be superhelpful.

[hockeyman]

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.

[andresluna]

Thank you so much man, it really helped me a lot

[marcosansalone]

That's interesting but is forming to create different pages. What about a complex project with many pages?

[birdofprey]

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.

[devbratjoshixxqptjcxdl]

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 😅

[gfsimracing]

Nice tutorial, mate. Have you figured out how to change the navbar properties such as top/bottom padding, just like airbnb for example?

[hero-godswayzilevu]

This video deserves a better title. For instance, "Figma Scroll Animation", "Click to scroll It has great content, and I hate how much digging( clickbaits) it took to find this. Thank you for the awesome video nontheless! @mavidesign

[mhsami]

Your video is amazing, its so helpful... but you should improve your audio quality

[cahit]

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?

[JedHurricane]

I've tried doing this but couldn't figure it out. Thanks for the vid

[HajimeChan]

Great idea but Figma is absurd that we need to take that much effort to recreate a simple animation.

[nsylianteng]

Can you have this same interaction on mobile?

[courtneybodkin]

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