By Matt Rae
S
croll into more advanced prototyping features with Scroll Groups in Adobe XD. With Scroll Groups you can create independently scrollable groups within a single artboard, great for working with multi-panel interfaces, maps, and horizontal image galleries.
What are Scroll Groups?
Prior to Scroll Groups, scrolling was limited to an artboard level vertical scroll, allowing you to fix elements on the artboard and scroll to content beyond the viewport height. Scroll Groups enable a new level of interaction in your designs, allowing a user to scroll up and down, side to side, and pan around within fixed areas of your design.
Any element can be given a scrolling attribute, simply by selecting one of the scroll options below the dimensions in the property inspector.
Scroll options shown from left to right - Horizontal, Vertical, and Horizontal & Vertical
Three options are available -- shown from left to right -- Horizontal Scroll, Vertical Scroll, and Horizontal & Vertical Scroll (or ‘Pan’). Horizontal Scroll and Vertical Scroll are locked to their respective axis, while the Horizontal & Vertical Scroll option allows free form scrolling along both axes simultaneously, great for panning a map area.
Creating a Scroll Group
In the notes application example below there are three overflowing sections of content where Scroll Groups can help. These areas are the list of notes, the note detail itself, and the horizontal images which flow off the page to the right. Let’s take a look at how Scroll Groups can be created for these views.
Vertical Scroll
Starting with the notes list, select all of the note blocks and make them a group if they’re not already. Though you can assign scroll properties to any element, in this case we want to have the entire list scrollable, so we’ll need all note blocks in one group. If the desired outcome is to have the header scroll with the content, then include it in the group as well. For this example it will be left out. With the group selected, clicking on the ‘Vertical Scrolling’ option in the property inspector will create a new overlay on the content, with two blue handles, one at the top and one at the bottom.
Notice that the handles have both been placed inside from the top and bottom bounds of the group. This boundary represents the visible area of our Scroll Group. To adjust, simply grab the handle at the top or bottom and align it to where the viewport should be. In this scenario, set the top boundary to the border of the list header, and the bottom boundary to the bottom of the page.
Now when we play the prototype, our content scrolls seamlessly within the defined viewport. This same process can be applied to the note detail section to allow users to scroll through the note’s content.
Horizontal Scroll
In the same way, a gallery of horizontally scrolling images can be quickly created. In the note detail section, there is a group of images that flows off the page to the right. This could be prototyped using Auto-Animate and a drag gesture, but in this case, the desired outcome is a horizontal scroll with the mouse.
With the group selected, clicking the Horizontal Scrolling option from the Property Inspector will again add a viewport area to the group. This time, because the scroll was set to horizontal, the grab handles will be positioned to the left and the right of the group. This provides the ability to drag them side to side to set up the scrolling view, as desired.
For this gallery of images, set the right handle to the edge of the page, and the left handle positioned to the left-edge of the note detail section. This positioning, though it is not lined up with the left margin of content, will allow for the images to be scrolled right to the edge of the section.
Horizontal and Vertical Scroll
Sometimes vertical or horizontal scrolling is not sufficient for creating a rich, true-to-life prototype of your digital experience. With the rise of ride sharing applications, food delivery services and autonomous vehicles, the integration of maps into digital products has increased.
Traditionally designing interactions with maps have been difficult, and often result in a static image being used as a placeholder for an embedded map widget. With Horizontal and Vertical Scroll Groups, static map images are a thing of the past.
In this example, draw a new rectangle into the note detail, and drag a map image from Finder into that shape. Notice that because the note content has Stacks enabled, the content resizes as we insert the new map element.
With the map element selected, click the “Horizontal and Vertical Scroll” option in the Property Inspector. You should now see a handle on each of the four sides of the map element. Simply drag the handles to create the desired viewport.
Since the map being used is an image, it’s incredibly simple to edit the image size to allow for a larger scrollable area.
Double click and select the image container, and then resize the container accordingly. Keeping the image centered in it’s mask will allow for an even scrolling area when interacting with the prototype. Be sure to resize the mask shape rather than adjusting the crop of the image. Hit play in the top right to view the prototype and pan around this newly created map element.
