I am building a prototype for my Uni project and here I want to use a scollable frame, so you can access all the patients. But I want a soft edge on the frame top and bottom, so that while scrolling the patient-buttons don't get so cut of but maybe get a fade.
Is that possible?
https://www.figma.com/design/KQ9oqC3QzwXvcpVOr95dLz/Untitled?node-id=0-1&t=fmwUVwxOU0wls0Ld-1
#How can I make a fade in and fade out
woven flint
steady igloo
I can help with that! The issue is that standard scrollable frames have hard edges that cut off content abruptly.
To create that fade effect, we'd typically use a gradient overlay mask on top of the scrollable frame. Quick question: Are you building this in Figma only, or will you be implementing it in code (and if so, what framework web, mobile app, etc.)?
@woven flint
woven flint
Hello, first of all, thank you so much for an answer. I'm building it only in figma since it's only supposed to be a prototype.
I've tried to use a mask but it somehow didn't work. Either the scrollable component was lost and my buttons that are clipped from the frame didn't show anymore, or the scroll didn't work anymore.
@steady igloo
steady igloo
Hello, first of all, thank you so much for an answer. I'm building it only in fi...
I can help 😊
What’s happening is that in Figma, masks break scrolling because a masked frame can’t stay scrollable. That’s why either the scroll stops working or the clipped buttons disappear.
The usual workaround is not to mask the scroll frame itself, but to place fade gradients on top of it as separate layers.
Quick question so I can guide you exactly:
Are you using a vertical scrolling frame, and do you want the fade always visible (top & bottom), or only when content is overflowing?
woven flint
Hey, hm okay, I'll try to do that.
I'm using a vertical scrolling drama and ideally the fade would only show when content ist overflowing, but if there's no other option it could also be always visible
steady igloo
Hey, hm okay, I'll try to do that.
I'm using a vertical scrolling drama and idea...
In Figma, scrolling breaks when you use masks on the scroll frame. The fix is to keep the vertical scroll frame untouched and add top and bottom gradient rectangles on top to fake the fade effect—scrolling will still work.
Figma can’t auto-show the fade only when content overflows, so the usual prototype solution is to keep the fade always visible but very subtle.
Do you want a quick step-by-step with the exact layer order and gradient settings?
woven flint
Ohhhh okay. I think I see how you mean that. I mean if you have time I'd love a step by step.