Master Figma’s Sticky Scroll in 4 Minutes
Вставка
- Опубліковано 9 лип 2024
- Sticky scroll has finally entered the game and in this tutorial we learn exactly how to use it, step by step.
🔴 Working File: timgabe.com/resources/figma-s...
Timecodes
00:00 Intro
00:15 Step 1
01:00 Step 2
03:05 Step 3
#figma #figmatutorial
The only guy on youtube that has intuitive, updated, straight-forward, quick and easy videos and tutorials. Became my #1 guy for figma.
I really really appreciate it, Bojan 🙏 this makes me very happy to read 😃
Thanx Tim I was struggle with this feature. all your videos are stunning ♥
I was waiting for this feature for a long time, glad it's finally here! Btw, these presentations are absolutely stunning Tim ❤
Adrian!! what a cool surprise to see you commenting here. thanks a bunch, my friend 😃❤️
Brilliant use of typography and colours in this project but what's more impressive is the how you pulled of the scroll, thanks for sharing this with us man!
thank you so much for the kind words, Dave 🙏
love the animation videos, Tim ❤
trying to find a good balance between animation videos and other videos, but it’s just so much fun to animate 😅💜
You are crushing it :)
Wow! Thank you so much. I just subscribed. Your content is amazing!
that makes me genuinely happy to hear, Haneen! thank you!!
Seriously 😳, it took only a few minutes and it's done. Thank you so much for making the tuts bluff free 💙
this is exactly what I want to achieve! thanks for sharing, Farhan! 🥳
Tim this is wonderful and awesome, will try it out
happy you like it, Ikenna! 🤩
1:00 is what you are looking for trust me, Thanks Tim👍
Great!! Ur video is very easy to understand especially for amateurs like me. Thanks !!
that’s so great to hear, it’s exactly what I want!! 🤩
Thanks a lot for this easy to understand lesson ❤! But how should I prepare my complex and nested layout (colums)? Do I have to (!) convert auto layout to frames?
Super helpful tutorial, thanks so much!
I applied this approach to a mobile design, wherein I wanted a header element to stick to the top of the screen while scrolling.
However, when scrolling back down in the prototype, I'd like that element to return to its starting position - without going past it.
Is there a method for this that you're aware of? Thanks again!
This was just what I needed! I'm in the process of designing a hi-fi prototype of an app and was wondering how I could have the top nav scroll out of the screen, but then leave the main header visible as people scrolled through a long list. Thank you!!
that’s great to hear 😃 perfect timing then!!
Thank you!
my pleasure, Vladislav! ☺️
Awesome 👍🏾
thanks a lot, my friend 😃
Hey loved this video! Short, sweet, and right to the point. Question though, is there a way to know how the elements will look in terms of closeness (button distance from the text) when they stick before testing them on prototype mode?
happy you liked it, Xavier!!
for the question:
I'm not sure if I understand fully, but you could just top align the elements in the frame to see what the distance would be!
Thanks Man
thank you for supporting, Wajahat! 😃
This one is good. Will try to do it myself👍🏻
do it, my friend! it's a lot of fun to play around with 🤩
this video is super well done and useful, but off topic i gotta say man, you could deffo be a model
thank you!! really appreciate the kind comments 😃
Really your content ie easy to understand ❤️ from India.
that’s awesome to hear, thanks a lot for the comment 💜
Thank you so much for all these videos, I am just learning Figma however have a long history in design and animation. Seems Figma and Framer are a new hobby I'm about to dive into. One thing I don't understand yet, how do the animations we do in Figma translate to Framer? I see Framer is very easy to create animations, so what would be best practise? Design in Figma and import over to Framer then animate there?
thanks a lot for the comment, my friend 🙏 I actually have an upcoming video on exactly this, so stay tuned! 🤩
Thank you for making this simple to understand.
➡ QUESTION - What should I do if I want the sticky feature to only work in one section/frame, so I can continue scrolling?
hey my friend! simply too many comments for me to get into details nowadays, but i'm launching paid mentoring on my upcoming website (timgabe.com) if you want to chat about things like this!
This is awesome. Thanks Tim but I just wanna ask, what if you want the text to change as you scroll but it will still be sticky to that same position? Is that possible?
you could create an interactive component for the text that changes based on either a delay or some other interaction 😃 wouldn't be possible based on the scroll position though...
@@TimGabe I will try that and see.... Thanks for all your videos
Please do a video for UI portfolio making.
added to the list!!
Hi Tim, I was able to add this "sticky" animation feature in my prototype! 🎉🙌 I wanted to bring up an issue I just came across to see if you have any tips on problem shooting it. After watching a video from another channel made by a developer/designer, they said it helps in hand-offs when we use frames instead of groups. This advice and seeing inconsistencies in my spacing because of not applying auto-layout constraints to my components and the frames themselves, I thought I'd go back and edit all of my components to be more responsive and add auto-layout to the frames.
But now, Figma isn't allowing me to make my bottom nav "fixed" (always showing at the bottom of the screen). I've tried going into each component and checking their scroll settings under prototype since that's where I've seen the "fixed" element options after Figma's latest update. But haven't been able to fix it yet (pun intended lol). I think it would be awesome if one day you could make a video of common things you have to problem shoot when using Figma and your approach or list you kind of go through in your mind. Anyways, thank you for the super helpful content!!!
I figured it out! When I removed auto-layout from the iPhone frame itself, the option for making the bottom nav fixed wasn't deactivated any longer. 🙏 It's in the prototype settings now instead of in the constraints area under the design tab.
happy you found the solution, my friend 😃
👍👍👍
🤩👌
YOU ARE MY SAVIOR
haha, that's amazing florine!!
Great... But how do you make it stop sticking after scrolling a particular distance?
hey Elvis! you will have to put your content into different containers (frames) 😃
@@TimGabe oh ok.. Awesome.. Thank you
@@TimGabe Hi Tim, can you explain me this? Have you a video on this? Thank you!
I loved! but my doubt is that by passing this effect to the development team, they should replicate it in code. How do you do it in this case if they set limits?
not sure I quite understand what you mean by limits, Paloma!
I think devs would be able to figure this out just by you showing them the prototype and then working together with them to perfect it 😃
Soooooo Fast 🔥
thank you, my friend! 🥳
How to make code it
when you will talk again your content is really Loyal no hidden things at all . Please talk fast😅so that we can become GREAT SEALING ARTISTS.
thanks a lot Abdullah! 🙏
I have no option to choose "Position"... Is it because I haven't premium Figma?
maybe you haven’t updated your client? it should show when you target a frame 🧐
you look handsome, your voice and your content are so good. I dare to ask do you have gf 🌝
thank you so much, Huyen! I do have a wonderful girlfriend 😍
Devs crying while watching this
it's actually very achievable with code without having to go all too crazy 😃
but yes, fancy effects usually don't sit well with devs unless they're into visual frontend work 👌
THANKS MAN🥹🥹🥹
happy to help!! 😃
1:00 is what you are looking for trust me, Thanks Tim👍
happy to help, Timothy! 😃