Linking Up/Down a Page & Scrollable Areas

Topics covered in this Adobe XD tutorial:

Making Links that Scroll Up/Down a Page, Making the Navbar Fixed to the Screen, Adjusting the Position & Speed of the Scroll, Creating a Scrollable Area Within a Page

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to create a prototype with links that scroll you up or down an artboard. You’ll also learn how to make a specific part of a page (artboard) scrollable.

Adding Links to the Navbar

1. In Adobe XD, go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
2. Navigate into Desktop > Class Files > Adobe XD Class and double–click on Scrolling In a Page.xd to open it.
3. In the Toolbar, choose the Select tool .
4. At the top left of the window click Prototype.
5. Zoom in so you can see at least the top of the artboard and the Maui title photo (you don’t have to see the whole thing).
6. We want the items in the navbar to link down the page to scroll to the appropriate section in this page. The navbar text is a group, so in the navbar double–click on Maui to select it.
7. A blue arrow will appear to the right of the Maui text. Drag the blue arrow down to the Maui photo below.

8. In the Property Inspector these settings should already be set, but notice:

   • Trigger should be set to Tap.
   • The Action’s Type should be set to Scroll To.
   • Destination should be set to Maui (the name of the group you dragged to).
9. At the top right of the window, click the Desktop Preview button .

10. In the navbar click on Maui and it should scroll down!

Making the Navbar Fixed to the Screen

The navbar is no longer visible. Let’s tell it to stay at the top of the screen to make navigating to other parts of the page faster.

1. Close the preview window.
2. Click in an empty area of the canvas to make sure nothing is selected.
3. Drag a selection around the entire navbar and its background. (We locked the header background photo so you won’t have to worry about that.)
4. In the Property Inspector, check on Fix Position When Scrolling.
5. At the top right of the window, click the Desktop Preview button .
6. Scroll down to see the navbar stays fixed at the top of the screen.
7. In the navbar click on Maui to scroll there.
8. Close the preview window.
9. Click in an empty area of the canvas to make sure nothing is selected.
10. In the navbar double–click on Kauai to select it.

11. Let’s add another link. Sometimes it’s hard to see the navbar and the place you’re linking to, so let’s see an alternate way instead of dragging like we did the first time.

    At the top the Property Inspector, to the far right of Interaction click the + button.

12. In the Property Inspector on the right, set the following:

    • Trigger: Tap
    • Action’s Type: Scroll To
    • Destination: Kauai (the name we gave to the group we want to scroll to)
13. At the top right of the window, click the Desktop Preview button .

14. We had added links to the other buttons, so click any of the navbar links see how nice it is to move around the page.

Adjusting the Position & Speed of the Scroll

1. Scroll up to the top of the page.
2. In the navbar click on Maui again to scroll there.

3. Notice the following:

   • It scrolls very quickly. We’ll see how to adjust the speed in a moment.
   • The photo is behind the navbar, because XD puts the element you’re scrolling to at the very top of the screen (which currently is behind the navbar that’s on top of the photo).
   • The layer effect with the blurred navbar background looks cool, but in our design we’ve vertically centered the text in photo. With part of the photo covered, the text is no longer centered. Let’s have the photo start below the navbar, rather than behind it.
4. Close the preview window.
5. In the navbar select Maui (if nothing is selected you’ll have to double–click).

6. Our navbar is 75 pixels tall, so in the Property Inspector on the right, set Y-Offset to -75 and don’t miss the minus part!

   • Notice in the page that there’s now a pink area above the Maui photo to indicate the amount of space we just set.
   • Also notice about the pink area there’s a blue line with a handle to the left. You can drag that handle to visually change the amount (although we don’t want to in this example because we’re being precise).
7. Set Duration to 0.6 s (so it takes longer to scroll).
8. At the top right of the window, click the Desktop Preview button .

9. In the navbar click on Maui to scroll there.

   The speed of the scroll should be slower (be careful of making it too slow because users will be impatient), and now the photo should start below the navbar.

10. Close the preview window.

Scrolling to the Top of the Page

Let’s make the Hawaii logo link to the top of the page.

1. Click in an empty area of the canvas to make sure nothing is selected.
2. Click once on the Hawaii logo at the top left of the page.
3. A blue arrow will appear to the right of the Hawaii logo. Drag the blue arrow down slightly below the navbar to anywhere on the header photo and release.

4. In the Property Inspector on the right, set the following:

   • Trigger: Tap
   • Action’s Type: Scroll To
   • Destination: header (the name of the group you dragged to)
   • Y-Offset: 0
   • Easing: Ease Out
   • Duration: 0.6 s
5. At the top right of the window, click the Desktop Preview button .
6. In the navbar click on Maui to scroll down.
7. Click on the Hawaii logo to scroll back to the top of the page.

8. Close the preview window.

Creating a Scrollable Area Within a Page

1. At the top left of the window, click on Design.
2. Scroll down to the second photo in the Maui section. It’s the photo above the text Mt. Haleakala’s southern face is vastly different from the north.
3. The photo is in a group, so double–click on the photo to select it.
4. Notice the photo is wide and extends off the right side of the artboard.
5. In the Property Inspector’s Transform section, below Y click on Horizontal Scroll .

6. XD crops in on the selection. We want the photo to cover the entire width of the artboard, so:

   • Drag the right handle so it’s at the right of the artboard.
   • Drag the left handle so it’s at the left of the artboard.
7. At the top right of the window, click the Desktop Preview button .
8. Scroll down to that photo in the Maui section.
9. Scroll horizontally through the panorama photo (you can drag right/left on the photo) to see the hidden part. Cool!

10. Close the preview window.