Adobe XD doesn’t provide scroll state settings or scripting, but you can still imitate scroll shadow behavior in your prototypes. Here’s how.
Desired design
Let’s say you’ve designed this scrollable screen.
The header casts a shadow at all times when you run the prototype. But let’s say, for the purposes of keeping this article moving along, that this isn’t exactly what you want.
What you really want is a scrollable screen that displays the header shadow only when the content isn’t scrolled all the way to the top.
Adobe XD doesn’t support doing this directly via settings or scripting, but you can still simulate the effect.
The basics of scrolling in Adobe XD
First, let’s address the basics of how scrolling works in Adobe XD.
If you already know this stuff, skip ahead to the “Prototype a scroll shadow” section.
Scrolling elements and fixed elements
Adobe XD allows for vertical scrolling when the artboard height is taller than the viewport height. This just means that you designed a screen with more content than fits in the viewable screen area.
On a scrollable screen, every element on the artboard moves when you scroll, except the elements you’ve marked as Fixed Position. This means that if you want a particular element to stay put when you scroll, you’ll select that element and check the “Fixed Position” checkbox.
Layers of elements
Just because an element’s position is fixed doesn’t mean that the element will automatically appear in front of the scrolling content like you might intend.
Elements appear in front of other elements based on their position in XD’s Layers panel. Typically, you want the fixed elements to appear higher on the list than the scrollable elements. Otherwise, the resulting prototype will look odd when, say, the scrolling content slides over a navigation bar instead of under it.
Prototype a scroll shadow
Adobe XD doesn’t support element settings that let you automatically toggle a shadow on or off based on scroll state. Adobe XD also doesn’t support event triggers or scripting to allow you to program things like that yourself.
Still, you can pull off a good approximation of the scroll shadow effect in Adobe XD.
Here’s how you do it:
- Create a sneaky element that obscures the shadow when the content is scrolled to the top
- Arrange things so that the sneaky element slips in between the shadow and the rest of the header
1. Create an element to obscure the shadow
This part is simple. Create a rectangle that matches the color of the background and position it to obscure the shadow.
The sneaky rectangle will covers the shadow until it moves upward when you scroll, revealing the shadow.
However, when you scroll, our new rectangle will pass in front of the fixed header. That won’t look good, so we have to…
2. Make a “sandwich”
Your fixed header, including its shadow, is probably an element group. If you’re re-using the header on multiple screens, then you’ve made it a symbol, in which case it’s definitely a group.
You want your sneaky rectangle to pass above the shadow but below the rest of the header. That’s only possible if you rearrange the header a bit.
You need to make a layer sandwich: a top header layer without a shadow, a bottom header layer that displays a shadow, and the sneaky rectangle that will appear in between the two.
“Sandwich” steps:
a) Isolate the background of the header group.
b) Copy it, exit the header group, and then paste it as a new “under-header” element. Check Fixed Position for this new element.
c) Arrange the new element to appear below the header group on the Layers panel.
d) Keep the shadow on the new under-header, but turn off header’s shadow.
e) Arrange the sneaky rectangle to appear between the header and the under-header.
Limitations
This approach approximates a real scroll shadow you might implement in your website or app, but it’s not quite the same thing. Here are some of the limitations of this approach.
- The bigger the shadow, the more the effect of this approach—revealing the shadow from the bottom up—looks a little weird.
- If the shadow already overlaps the topmost scrollable UI element, then it’s not possible to obscure the shadow cleanly.
- If the background is an image or pattern or gradient, this approach isn’t very effective. Even if you copy a bit of the background to cover the shadow, you’ll get a “tearing” effect when you scroll.
Learn about how BetaTesting can help your company launch better products with our beta testing platform and huge community of global testers.
BetaTesting Blog 