No video

Transparent, Fixed, and Dynamic Navbar Prototyping for Scrolling in Figma UI Design.

  Рет қаралды 45,825

Thefemijohn

Thefemijohn

Күн бұрын

Learn a prototyping trick for your fixed transparent Navbar component

Пікірлер: 90
@andresfelipen2211
@andresfelipen2211 Ай бұрын
Bro, really thanks for this video. I had been trying on my own some way to do this interaction but I gave up and was looking for a tutorial hoping someone had done it. That was you.
@femijohn
@femijohn Ай бұрын
You're Welcome. Glad I could help 🥹
@asherfaulkner5696
@asherfaulkner5696 9 ай бұрын
Nailed it. And under seven minutes! Consider me subscribed.
@femijohn
@femijohn 9 ай бұрын
Thank You 🙏🏽
@metinkucuk734
@metinkucuk734 5 ай бұрын
Hey john, your video really helped in my landing page project
@Monica-isme
@Monica-isme 2 ай бұрын
Thank you so much you are amazing !! I was having a hard time and now it’s fixed my problem
@femijohn
@femijohn 2 ай бұрын
You’re welcome!
@Yejdhebrkdosu
@Yejdhebrkdosu 8 ай бұрын
OMG I have been looking for this tutorial for so loooong!!!! Thank you!!!!
@femijohn
@femijohn 8 ай бұрын
You're welcome!!😊
@9856359
@9856359 9 ай бұрын
Thank you sooooooo much, I wasted a whole hour of work because of this. You saved my day!
@femijohn
@femijohn 9 ай бұрын
You're welcome. Glad it helped! 😊
@sarahayman3506
@sarahayman3506 8 ай бұрын
Clear, easy and helpful.. thanks man!
@femijohn
@femijohn 6 ай бұрын
You're welcome
@promiseudia1337
@promiseudia1337 10 ай бұрын
I've been searching for this.. thank you so much
@femijohn
@femijohn 10 ай бұрын
You're welcome!😊
@DashiSama
@DashiSama 3 ай бұрын
Thank you! I was looking for just exactly this! And it helped a lot :)
@femijohn
@femijohn 2 ай бұрын
You're welcome!
@TheChefAine
@TheChefAine 11 ай бұрын
You’re a genius 😅😅. This was an amazing tutorial with very clear explanations. Thank you for sharing ❤❤😊
@femijohn
@femijohn 11 ай бұрын
Thank you. I’m glad you found it helpful ❤️
@aniebietoluwa
@aniebietoluwa 10 ай бұрын
Great video! Well done Femi 👏
@femijohn
@femijohn 10 ай бұрын
Thank you!! 😊
@user-yi3qx5js2z
@user-yi3qx5js2z 11 ай бұрын
Amazing work. This is brilliant. Thank you 🙌🏾
@femijohn
@femijohn 11 ай бұрын
You’re welcome, I really appreciate your kind words 🙏
@_BTS_FF_
@_BTS_FF_ 5 ай бұрын
your video helped me a lot , thank you so much for this useful video ❤
@femijohn
@femijohn 5 ай бұрын
You're welcome 😊
@Rebecca-xw5zi
@Rebecca-xw5zi 22 күн бұрын
Thank you so much! P.S waiting eagerly for a new video😂
@femijohn
@femijohn 22 күн бұрын
You won't have to wait long 😁
@pearlite6243
@pearlite6243 11 ай бұрын
Great video and explanation. Thank you!
@femijohn
@femijohn 11 ай бұрын
Thank you so much 🙏
@nguyenthithuthuy6148
@nguyenthithuthuy6148 10 ай бұрын
Great video and explanation. Thank you so much 😍
@femijohn
@femijohn 10 ай бұрын
You’re welcome 🙏😊
@mmmuriahhh
@mmmuriahhh Ай бұрын
great video! thank you
@femijohn
@femijohn Ай бұрын
You’re welcome 🙏
@AlessandroCirina-bizconsulting
@AlessandroCirina-bizconsulting 29 күн бұрын
the idea is good, but if you then try to use the navigation menu and you haven't passed the hero section, when the mouse goes over it again, you will reactivate the animation making the original sticky bar state reappear.
@HajaratAkanmu
@HajaratAkanmu 5 ай бұрын
You are a life saver!
@femijohn
@femijohn 5 ай бұрын
you're welcome
@JustVinit
@JustVinit 3 ай бұрын
thanks bro i was looking for this
@femijohn
@femijohn 2 ай бұрын
Glad I could help
@michaellotanna3501
@michaellotanna3501 Ай бұрын
Thanks a lot❤❤
@femijohn
@femijohn Ай бұрын
You’re welcome ❤️
@user-bz9cr3nu9j
@user-bz9cr3nu9j 5 ай бұрын
Thank you very much for this video!!
@femijohn
@femijohn 5 ай бұрын
Glad it was helpful!
@abdulrehmanshaikh6316
@abdulrehmanshaikh6316 6 ай бұрын
Amazing, I fixed the isse by your video. Suggestion: we can make a components instead of copy the frame (Home Page)
@mushu7887
@mushu7887 2 ай бұрын
Great tutorial! I was wondering if there is a way of doing this also for mobile prototypes
@femijohn
@femijohn 2 ай бұрын
Thank you. Sure there is a way to do this on mobile prototype
@Abhi-ee2dk
@Abhi-ee2dk 4 ай бұрын
Thank you very much, it helped me a lot.
@femijohn
@femijohn 2 ай бұрын
You're welcome!
@iyareehizogie3272
@iyareehizogie3272 11 ай бұрын
Thank you very much for this wonderful video sir
@femijohn
@femijohn 11 ай бұрын
You’re welcome
@izuchukwuigwe4185
@izuchukwuigwe4185 2 ай бұрын
Thanks a lot
@femijohn
@femijohn 2 ай бұрын
Most welcome
@RestorasiHunian
@RestorasiHunian 6 ай бұрын
how to make this in mobile version?
@izannaisaque5453
@izannaisaque5453 8 ай бұрын
Amazing, thank you a lot.
@femijohn
@femijohn 8 ай бұрын
You're welcome.
@shrishtikashyap6434
@shrishtikashyap6434 8 ай бұрын
Thank you. I was stuck. This helped so much and in an instant!!
@femijohn
@femijohn 8 ай бұрын
Glad it helped! You're welcome😊
@richardenoch8703
@richardenoch8703 11 ай бұрын
Please i how do you make your prototypes fill your screen on web view? Thank you for this video, and the many others you've done.
@AnnaAlice-f3m
@AnnaAlice-f3m 2 ай бұрын
thanks, my hero
@femijohn
@femijohn Ай бұрын
You’re welcome
@samuelgodis6902
@samuelgodis6902 11 ай бұрын
This is amazing, definitely learnt something here. Is hero section another name for showcase section 🤔
@femijohn
@femijohn 11 ай бұрын
Thank you. I don’t know why I call it showcase. But for me, it means the same thing in this context. I’m not sure if it’s generally true.
@sarahyanez3372
@sarahyanez3372 7 ай бұрын
Genius!! Thank you so much :)
@femijohn
@femijohn 6 ай бұрын
You're welcome
@LearningLangues
@LearningLangues 5 ай бұрын
Thank you!
@femijohn
@femijohn 5 ай бұрын
You're welcome
@rose-moss
@rose-moss 10 ай бұрын
Thank you very much. It was a great help!
@femijohn
@femijohn 10 ай бұрын
You're welcome! Glad it was helpful.🙏🏽
@sweetbbluebelle
@sweetbbluebelle 15 күн бұрын
How do you do this for mobile? I can't seem to make it work because there won't be any mouse cursor for mobile....
@samarmansour5211
@samarmansour5211 9 ай бұрын
very useful
@femijohn
@femijohn 9 ай бұрын
Thank You 🙏🏽
@domessi25
@domessi25 6 ай бұрын
THANKS MAN!
@femijohn
@femijohn 6 ай бұрын
You're welcome.
@mohammedasifshaikh5276
@mohammedasifshaikh5276 6 ай бұрын
Thanks!
@femijohn
@femijohn 6 ай бұрын
No problem!
@user-kn7yc1sh4t
@user-kn7yc1sh4t 5 ай бұрын
This is really helpful but what if i have different pages? i can't make duplicates for each and every one of them.. please help
@ntntntntntntntnt
@ntntntntntntntnt 8 ай бұрын
hi, i kind of have a problem when doing this. if i were to try and put my mouse on my showcase, it stays at the transparent part and if i move my mouse outside of my showcase then it will show my other version of navbar. the problem is that if i scroll out of my showcase it like glitches out and switches very fast to my other navbar before showing my original even though my mouse would be outside of my showcase already.
@eyeruham
@eyeruham 2 ай бұрын
I ran into the same issue. Have you found a fix for this?
@eyeruham
@eyeruham 2 ай бұрын
I managed to get rid of the glitchy behaviour by setting it up differently. Instead of how @femijohn suggested, I simply used a colour variable to show or hide the fill colour of the header component (using the same idea of mouse enter & leave as trigger). This also reduced complexity by making it unnecessary to duplicate the page!
@ntntntntntntntnt
@ntntntntntntntnt Ай бұрын
@@eyeruham hey thanks for getting back to me, did this for a ux project a while back and I've not been on figma since 🙃 Good luck with whatever you're doing!
@hailey_hsu
@hailey_hsu 27 күн бұрын
I had the same issue, may I ask if you solve this already?
@geetajuyal4714
@geetajuyal4714 6 ай бұрын
Will someone tell me how to do same thing in mobile app on a scroll
@femijohn
@femijohn 6 ай бұрын
Its a very similar process.
@geetajuyal4714
@geetajuyal4714 6 ай бұрын
Thank you
@vanessadesign93
@vanessadesign93 8 ай бұрын
How do you do to see the prototype on the browser?
@femijohn
@femijohn 8 ай бұрын
Copy the prototype link and past in your browser URL. It works best if you're designing wiith your desktop screen size.
@LzzAa35
@LzzAa35 7 ай бұрын
Nice
@femijohn
@femijohn 6 ай бұрын
Thanks
@AustinIjeoma-pg8vu
@AustinIjeoma-pg8vu 8 ай бұрын
Please how do I send my job to a developer after I'm done designing in Figma? I am having this challenge.
@quentincolas5280
@quentincolas5280 6 ай бұрын
You got dev mod now so you just have to allow your dev by accessing your file in the team projecr you created.
@almog8569
@almog8569 3 ай бұрын
tnx
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 789 М.
王子原来是假正经#艾莎
00:39
在逃的公主
Рет қаралды 12 МЛН
Can Figma Do THIS? (It Changes When You Scroll)
17:07
Mavi Design
Рет қаралды 70 М.
Sticky Header Animations in Figma! (Without scroll support)
6:20
Reduce Prototypes by 50% (Simple trick) | Figma Tutorial
5:41
Top 2024 Web Design Trends
5:32
Codex Community
Рет қаралды 576 М.
Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial
8:00
Darren Northcott - Figma, UX & UI
Рет қаралды 116 М.
The CORRECT (and lazy) way to prototype | Figma Tutorial
5:00
Let's Design a Dashboard in Figma: UI Tutorial
35:10
Pierluigi Giglio
Рет қаралды 20 М.
Trick to Show/Hide Header on Scroll in Figma
4:53
Design Xstream
Рет қаралды 105 М.
王子原来是假正经#艾莎
00:39
在逃的公主
Рет қаралды 12 МЛН