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

Подписаться 47 тыс.

Просмотров 72 тыс.

50% 1

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

Опубликовано:

10 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 41

@nikyabodigital 2 месяца назад

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.

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

@debjeetpramanick7671 6 дней назад

Thank you for the video.

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

@andreeabottyan7323 3 месяца назад

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

@cahit7270 6 месяцев назад

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?

@andresluna3688 Месяц назад

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

@devbratjoshixxqptjcxdl1445 5 месяцев назад

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 😅

@hockeyman26789 Год назад

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.

@vivek5319 8 месяцев назад

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

@3DWithAditya 6 месяцев назад

Amazing brother ❤ this helps me a lot

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

@mhsami2150 3 месяца назад

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

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

@ViktorijaBilyte 9 месяцев назад

Thank you for sharing

@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

@nsylianteng 11 месяцев назад

Can you have this same interaction on mobile?

@star-devil9157 9 месяцев назад

Yes

@laran9922 8 месяцев назад

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