By Howard Pinsky
Hey everyone. I'm Howard Pinsky, Senior XD Evangelist at Adobe. And today we're going to take a look at how you can create and interact with horizontal and vertical scroll groups using Adobe XD. Let's dive in.
Here we have a notes application that we've been designing, and there are a few areas where scroll groups could come in handy. Specifically, the various pains extending across our design, and some of the content within them starting off with the list of notes. You'll notice that as I select its group, there are quite a few extending down the artboard. Enabling scrolling can be done within the Properties Inspector, and in this case will want to choose vertical. This will create a new scroll group and give you two handles which you can adjust, one at the top and one below. Anything within the bounds of the group will be visible, and anything outside will be accessible upon scroll. Launching the Preview window will let us see this in action. Next in the area over to the right there may be a few additional elements that could be improved using scroll groups. Similar to the list, we may want to make the rest of the note accessible when previewing our design. So selecting the group, a vertical scroll can be applied one more time. And I'll adjust the top handle to my liking.
But what about the other directions? Within this note we have a gallery of photos extending off the artboard, and to allow the user to quickly scroll through them all we can apply a horizontal scroll this time, and if necessary, the bounds can be adjusted to determine the window where these photos will remain visible. Finally, this note can use a map. So I'll grab the good old rectangle tool and draw one out. and because stacks is enabled on this group, the content below shifts, beautifully. Switching over to Finder, I have a map that will drop into the placeholder shape. Now maybe for this particular example, we may want to give users a bit more flexibility and allow them to pan around. In that case, a horizontal and vertical scroll group can be created. And I'll make sure to adjust the bounds so they line up with the rest of the note's contents.
With that in place the image of the map can be enlarged to set how much should be accessible once panning takes place. Great. It's time to see this all in action. Once again, the preview can be launched where I can not only vertically scroll through the list of notes and the details, but I can also horizontally scroll through the photos and pan over top of the map.
And that's a look at how scroll groups can expand upon your prototypes all from a single artboard. Make sure to subscribe for more Adobe XD tips and tricks and I'll see you all soon.
Scroll Groups make your prototypes behave like live websites and apps. Make parts of your designs scroll as you’re designing feeds, lists, carousels, galleries, and more. Learn how to define the region of the Scroll Group to set the visible scroll area.
