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

No video

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

Рет қаралды 70,478

Күн бұрын

Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Download FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
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

Пікірлер: 39

@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 3 ай бұрын

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.

@andreeabottyan7323 2 ай бұрын

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

@HajimeChan 6 ай бұрын

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

2 ай бұрын

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

@anushijain8035 10 ай бұрын

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

@andresluna3688 Ай бұрын

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

@hockeyman26789 11 ай бұрын

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.

@3DWithAditya 6 ай бұрын

Amazing brother ❤ this helps me a lot

@vivek5319 8 ай бұрын

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

@mhsami2150 2 ай бұрын

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

@birdofprey108 4 ай бұрын

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.

@gfsimracing Жыл бұрын

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

@backupbackb.u.b136 7 ай бұрын

Great video, it was very helpful.

@cahit7270 5 ай бұрын

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?

@devbratjoshixxqptjcxdl1445 4 ай бұрын

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 😅

@marcosansalone 4 ай бұрын

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

@MicaelaAsato 10 ай бұрын

Awesome, Just I needed!

@JedHurricane Жыл бұрын

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

@user-qn1tn7po7z 9 ай бұрын

Thank you for sharing

@nsylianteng 11 ай бұрын

Can you have this same interaction on mobile?

@star-devil9157 9 ай бұрын

Yes

@laran9922 7 ай бұрын

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.

@courtneybodkin5556 Жыл бұрын

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