By Dani Beaumont
Scroll groups in Adobe XD allow you to prototype a “window” of content that can be scrolled horizontally, vertically, or in both directions. This can be really handy when building UI elements like a carousel of images, a list of items, or an interactive map. Let me show you what I mean.
I have an artboard here I’m working on. I’ve already added my top and bottom navigation, and I’ve marked them as “fixed position” so that they will remain fixed as the viewer scrolls down the page. Next on the right I have my active page content.
Notice that both here towards the top, and here in the middle I have thumbnails that I’d like to scroll horizontally in a carousel layout. In order to make that happen all I need to do is select the three images here at the top, then in the Properties Inspector enable scroll by checking one of these three scroll toggles -- I can decide if I want the scroll direction to be horizontal, vertical, or both. I’ll stick with Horizontal.
Once I select that, notice on the canvas how the group now has a blue selection highlight and a handle to the left and right. This allows me to set the size of my scrolling “window”. I’ll go ahead and drag the window in a bit on the left and right. When I click off that window acts as a mask and clips off any of the content outside.
Next I’ll come in and do the same for the second set of thumbnails a bit lower on the design canvas, and adjust the size of the scroll window.
Now that I have the two horizontal groups set I’d like to do the same with the overall content, this time with a vertical scroll. For that I’ll select all of the content on the design canvas -- including my two “nested” scroll groups, and group them together at a higher level.
The last thing I’ll want to do is make sure the new scroll group is layered behind my top and bottom nav in the layers panel.
Now when I preview the prototype in the desktop preview app, notice how I can scroll down on the page below that top pinned navigation. As I come to a nested horizontal scroll group I can stop and scroll horizontally, then continue vertically down the page. I can even bring up an overlay artboard that has a scroll group here towards the bottom.
The best part of this feature is of course the elegance with which the XD team has integrated it throughout the product. I can combine a scroll group with auto animate . . . and even with component states if I’d like.
Now of course this interaction is going to work in the desktop preview app, in the XD mobile preview app, prototypes shared with your stakeholders, and in the specifications you hand over to your developer.
Scroll Groups help you create prototypes that look and work like the real thing, and help you communicate your intent to your stakeholders. I encourage you to give the feature a try.
Turn any part of your design into a Scroll Group and set it to scroll vertically, horizontally, or both directions. Create a Scroll Group and then drag the blue handles on the canvas to adjust the visible scroll area. When you preview the prototype, you can scroll through the designated area.
