Figma Tutorial: Master Sticky Scroll in 8 Minutes
HTML-код
- Опубликовано: 16 май 2024
- In this video, I'm going to show you how to use Figma's latest feature to create vertical sticky scroll prototypes.
Try Figma for free:
bit.ly/3LiRVEF
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/4aVc7pR
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
Hi Arash your video are super informative - thank you SO MUCH!! As UX/UI designer sometimes I struggle understanding the difference between modals/full sreen modals/screens and when to use them. I often get into discussions with developers where we disagree if a flow or a particular action should be in a full screen modal or in a new screen and how these should be dismissed. Would you be up to create a video where you through modals/full screen modals/screens - when to use them - and how to dismiss them?
Hi. Thank you so much. Sure, I'll add it to my list.
its nice bro and one more thing when scrolling reach the end (footer) then we dont need sticky thing then how it will hide/remove
Hey! regarding the last example- can you please make a video to explain how to make the sticky card stop at a specific point (for example- if I have a header in the page- and I don't want to merge with the header while scrolling?)
thanks for making this video, i am struggling with this scroll animation, when i tried myself by recreating these files, result not matching accurately, could you share this files for practice purpose, thanks in advance
Awesome! Thanks so much
No problem.
Thanks for the video tutorial, I am trying to make a button sticky but the options I get are "no scrolling", "horizontal", "vertical" and "both directions".
I am obviously doing something wrong... Any tips?
No problem. You missed one step. Please watch the video one more time. You should have set the Scrolling option of your main frame to vertical.
Thank you 🙏🙏
You're welcome 😊
Hey bro! i have a very interesting scroll problem that I am trying to solve in figma, please let me know how I could reach out to you for suggestion ?
🧡🧡🧡 very informative
Thanks.
This is nice tutorial. Am looking for scrolling data table columns horizontally. I have a report page many columns. It requires horizontal scroll
Thanks. Please watch the following video.
ruclips.net/video/HfcMYRIC0Fw/видео.html
Thank you for this tutorial. Do you know how can I make the right part sticky at first, and after scrolling the left content, it also starts scrolling?
No problem. You should just create a frame with a specific height for your right sticky content like what we did but just add some bottom margin to it.
Another amazing video by Arash,
can you do one for responsive search bar :)
Thank you so much Ali.
Sure. I will.
Very nice video keep it up. In the 2nd example, if at the end of the page I have for example, a footer? The subscribe object will fall on top of it, is there any way to make it stop before the footer?
Thank you. You can add some bottom padding to the Subscribe card.
did it work out? it didn't work with the padding..
@@saltandbattery it seems the padding will be cropped by the frame even when it reaches the bottom so it wouldn't work. Still looking for a way to stop the stick at certain bottom height
@@SPJ-88 you found a way to do that?
I've found the solution to this problem, if anyone is struggling with this, reply to this comment and I will happily help u!
🔥
It's helpful but can you do a video about "stop at bottom edge"?
Sure.
@@DesignWithArash Have you done a video for this? Or can u suggest how here?
Hi Arash, Thanks for your Video. Please also explain the Back to Top button in some Apps (which only appears from the left side of the phone when we scroll the screen down) actually from the beginning to the end of scrolling, as the finger touches the screen down, this key will be appeared. Thanks a lot (example by App for Online shop About You).
Hi. Thank you. Sure, I'll make a video about that.
super healpfull
Thanks.
But there was another option above sticky "Fixed" ? What's that for
I know figma makes a lot of changes but a several of your videos never provide the same result. Perhaps it's because we're not sure how you built out the frames.. I try to follow your file types but still doesn't matter.
Fun fact ;p Looks easy but its not😅
😅😅
First screen shows a blue footer which is also sticky but it wasn't talked about. That's what I came here for. Time wasted.
That's because it was not related to the topic of this video. Anyway, you can select the tab bar and set its constraints to the bottom instead of the top.
@@DesignWithArash It wasnt related to the video titled "master 'sticky' scrolls in 8 minutes?