Linking Up/Down a Page & Scrollable Areas

Topics Covered in This Adobe XD Tutorial:

Creating Links That Enable Smooth Page Navigation, Implementing Fixed Navigation Elements for Enhanced User Experience, Fine-Tuning Scroll Position and Animation Speed, Designing Interactive Scrollable Regions Within Your Prototype

Exercise Preview

Exercise Overview

In this hands-on exercise, you'll master the art of creating sophisticated prototypes with intelligent navigation systems. You'll learn to build links that smoothly transport users to specific sections of your design, implement sticky navigation elements that enhance usability, and create engaging scrollable content areas. These techniques are essential for modern web and app design, where seamless user experience can make or break a product's success.

Adding Links to the Navbar

Navigation is the backbone of user experience. Let's start by creating intelligent links that will guide users effortlessly through your content.

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 to enter prototyping mode, where the magic of interaction design happens.
5. Zoom in so you can see at least the top of the artboard and the Maui title photo. Proper zoom levels ensure precision when creating interactions.
6. We'll create anchor-style links that scroll users to relevant content sections. Since the navbar text is grouped, double–click on Maui to select the individual text element.
7. A blue arrow will appear to the right of the Maui text. This is your interaction connector—drag it down to the Maui photo below to establish the relationship.

8. In the Property Inspector, verify these critical settings:

   • Trigger should be set to Tap for optimal touch interaction.
   • The Action's Type should be set to Scroll To for smooth navigation.
   • Destination should be set to Maui (the name of the group you targeted).
9. At the top right of the window, click the Desktop Preview button to test your interaction.

10. In the navbar click on Maui and watch the smooth scroll animation in action. This immediate feedback validates your interaction design.

Making the Navbar Fixed to the Screen

Fixed navigation elements are crucial for maintaining user orientation and providing constant access to key functions. Let's implement this fundamental UX pattern.

1. Close the preview window to return to your design workspace.
2. Click in an empty area of the canvas to ensure nothing is selected, giving you a clean selection state.
3. Drag a selection around the entire navbar and its background. The locked header background photo won't interfere with your selection.
4. In the Property Inspector, check on Fix Position When Scrolling. This creates the sticky behavior that keeps your navigation accessible at all times.
5. At the top right of the window, click the Desktop Preview button to test the fixed positioning.
6. Scroll down to observe how the navbar maintains its position, creating that essential "always available" navigation experience.
7. In the navbar click on Maui to test the scroll functionality with your new fixed navigation.
8. Close the preview window and click in an empty area of the canvas to reset your selection.
9. In the navbar double–click on Kauai to select it for our next interaction.

10. Let's explore an alternative method for creating scroll interactions. When screen real estate is limited or when precision is needed, the Property Inspector approach often works better than visual dragging.

    At the top of the Property Inspector, to the far right of Interaction click the + button to add a new interaction.

11. In the Property Inspector on the right, configure these settings for optimal user experience:

    • Trigger: Tap
    • Action's Type: Scroll To
    • Destination: Kauai (targeting the appropriately named group)
12. At the top right of the window, click the Desktop Preview button .

13. Test all the navbar links to experience how fixed navigation transforms the user journey. Notice how users can now navigate freely without losing access to the navigation controls—a hallmark of professional interface design.

Adjusting the Position & Speed of the Scroll

The devil is in the details when it comes to scroll animations. Proper timing and positioning can mean the difference between a delightful user experience and a frustrating one.

1. Scroll up to the top of the page to establish your starting position.
2. In the navbar click on Maui again to examine the current scroll behavior.

3. Observe these critical UX issues:

   • The scroll speed feels abrupt—users prefer more controlled, natural-feeling animations that mirror real-world physics.
   • The photo appears behind the navbar because XD positions the target element at the screen's top edge, creating an overlap with your fixed navigation.
   • The elegant blurred navbar background creates visual depth, but the covered photo disrupts the intended visual hierarchy and centering of the text overlay.
4. Close the preview window to make your adjustments.
5. In the navbar select Maui (double–click if nothing is currently selected).

6. Since our navbar has a 75-pixel height, we'll offset the scroll target accordingly. In the Property Inspector, set Y-Offset to -75—don't miss the negative sign, which tells XD to position the content below the navbar.

   • Notice the pink indicator area above the Maui photo—this visual feedback shows exactly where your content will appear.
   • The blue line with a handle provides a visual method for adjustment, though precise numerical input often yields better results for professional work.
7. Set Duration to 0.6 s to create a more refined, deliberate scroll animation that feels both responsive and polished.
8. At the top right of the window, click the Desktop Preview button .

9. In the navbar click on Maui to experience the refined interaction.

   The animation now feels more natural and professional, while the content positioning respects your navigation design. Remember: users expect responsiveness, but they also appreciate animations that feel intentional rather than rushed.

10. Close the preview window to continue refining your prototype.

Scrolling to the Top of the Page

Logo-to-home navigation is a web convention users have come to expect. Let's implement this intuitive pattern.

1. Click in an empty area of the canvas to ensure a clean selection state.
2. Click once on the Hawaii logo at the top left of the page to select this important branding element.
3. A blue arrow will appear to the right of the Hawaii logo. Drag it down slightly below the navbar to anywhere on the header photo and release to establish the home link.

4. In the Property Inspector, configure these settings for the optimal "return to top" experience:

   • Trigger: Tap
   • Action's Type: Scroll To
   • Destination: header (the group name for your header section)
   • Y-Offset: 0 (we want the full header experience)
   • Easing: Ease Out (creates a natural deceleration, like real-world motion)
   • Duration: 0.6 s (maintaining consistency with your other scroll timings)
5. At the top right of the window, click the Desktop Preview button .
6. Test the navigation flow: click on Maui to scroll down, then click the Hawaii logo to return home.

7. Close the preview window. You've now created a complete navigation ecosystem that follows established UX patterns.

Creating a Scrollable Area Within a Page

Horizontal scrolling within a vertical layout adds sophisticated content organization, especially valuable for showcasing panoramic images, galleries, or data tables without disrupting the main page flow.

1. At the top left of the window, click on Design to switch back to design mode for content manipulation.
2. Scroll down to the second photo in the Maui section—the panoramic image above the text Mt. Haleakala's southern face is vastly different from the north.
3. Since the photo is grouped, double–click on the image to select the actual photo element within its container.
4. Notice how the image extends beyond the artboard boundaries—this excess content is perfect for horizontal scrolling interaction.
5. In the Property Inspector's Transform section, below Y click on Horizontal Scroll to enable the scrollable behavior.

6. XD automatically creates a scrollable viewport. To optimize the viewing area:

   • Drag the right handle to align with the right edge of the artboard for full-width utilization.
   • Drag the left handle to align with the left edge of the artboard, creating a seamless integration with your layout.
7. At the top right of the window, click the Desktop Preview button to test your horizontal scroll implementation.
8. Navigate to that photo in the Maui section and test the horizontal scrolling by dragging left and right on the image.

9. Close the preview window. You've successfully implemented a sophisticated content interaction that allows users to explore rich media without leaving the main content flow—a technique increasingly important in modern responsive design.