Linking Up/Down a Page, Scrollable Areas, & Hyperlinks

Topics Covered in This Figma Tutorial:

Creating anchor links for smooth page navigation, implementing fixed navigation bars, fine-tuning scroll positioning and animation speed, designing scrollable content areas within frames, and adding external hyperlinks to prototypes

Exercise Preview

Exercise Overview

Master the art of creating dynamic, scrollable prototypes in Figma. This comprehensive exercise will teach you to build navigation that smoothly scrolls users to specific sections, implement fixed navigation bars that remain accessible while scrolling, and create interactive scrollable areas within your designs. You'll also learn to integrate external web links, creating prototypes that feel like fully functional websites. These skills are essential for modern UX design, where smooth navigation and intuitive scrolling behaviors can make or break user engagement.

Opening the File

1. In Figma, navigate to the homescreen (file browser) if you're not already there:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.
2. To import your exercise file, click Import file (located near the top right of your screen).

3. Navigate to Desktop > Class Files > Figma Class and double-click on Scrolling In a Page.fig to select it.

   Once the upload completes, click Done and double-click the file to open it. You're now ready to build interactive scrolling behaviors that will elevate your prototyping skills.

Adding Links to the Navbar

We'll start by creating smooth scroll navigation—a fundamental UX pattern that helps users quickly jump to relevant content sections while maintaining context within the page.

1. In the right panel, click on Prototype to access Figma's interaction tools.
2. Zoom in to clearly see the top of the frame and the Maui title photo. Proper visibility ensures accurate link targeting.
3. The navbar text is nested within multiple groups for better organization. Hold Cmd (Mac) or CTRL (Windows) and click on Maui to select it directly, bypassing the group hierarchy.
4. Hover over any edge of the Maui text until a blue connector circle appears. Drag this circle down to the Maui photo below to establish the scroll target.

5. In the Interaction details popup that appears, configure the following:

   • The interaction is automatically set to Scroll to with the correct destination—Figma intelligently detects your target.
   • By default, there's no animation, which would cause an abrupt jump. For a professional user experience, change Instant to Animate under Animation to create smooth scrolling motion.
6. Test your work immediately by clicking Present at the top right, or use the keyboard shortcut Cmd–Option–Return (Mac) or CTRL–ALT–Enter (Windows).

7. In the navbar, click on Maui and watch the smooth scroll animation in action—this is exactly what users expect from modern web interfaces.

8. Close the presentation tab to return to your workspace.
9. Now let's add a second navigation link using an alternative method. Hold Cmd (Mac) or CTRL (Windows) and click on Kauai in the navbar to select it.

10. When targets are far apart or off-screen, dragging connections can be cumbersome. Instead, use the Prototype panel method for better precision:

    In the Prototype panel, click the Plus (+) button next to Interactions.

11. Configure the new interaction by clicking on Click —> None and setting:

    • Change None to Scroll to to define the interaction type.
    • Change the destination from None to Kauai (Figma automatically detects layer names for easy targeting).
    • Under Animation, change Instantto Animate for consistent user experience across all navigation elements.
12. Test this second link by clicking Present or using Cmd–Option–Return (Mac) or CTRL–ALT–Enter (Windows).

13. Click Kauai in the navbar to verify the smooth scrolling behavior. You now have two different methods for creating scroll links—use whichever feels more intuitive for your workflow.

Making the Navbar Fixed to the Screen

Fixed navigation is crucial for long-form content, ensuring users can always access navigation without scrolling back to the top. Let's implement this essential UX pattern.

1. Keep the presentation tab open and switch back to your file's edit view—this allows you to see changes in real-time.

2. In the Layers panel, locate the Header group and perform these organizational steps:

   • Collapse the navbar group by clicking its dropdown arrow for cleaner layer management.
   • Select the entire navbar group.
3. Switch to the Prototype panel in the right sidebar.

4. Notice that Scroll behavior options aren't available—this is because fixed positioning requires elements to be direct children of the frame, not nested within groups. This is a common structural requirement in Figma that mirrors CSS positioning rules.

5. In the Layers panel, drag the navbar group above the Header group, making it a direct child of the main frame. This restructuring is necessary for fixed positioning to work.
6. Now in the Prototype panel, you'll see Scroll behavior options. Set Position to Fixed (stay in place).
7. Test the fixed navigation by clicking Present or using Cmd–Option–Return (Mac) or CTRL–ALT–Enter (Windows).
8. Scroll up and down to verify the navbar remains anchored at the top of the screen—this creates the persistent navigation experience users expect.

9. Test your scroll links by clicking navbar items. You now have a fully functional fixed navigation system that maintains accessibility throughout the user journey.

Adjusting the Position of the Scroll

Fixed navigation creates a new challenge: content can scroll behind the navbar, disrupting visual hierarchy. Let's solve this with precise offset positioning—a technique that ensures content appears exactly where intended.

1. While in the prototype, click Maui in the navbar to scroll to that section.

2. Observe the layout issue that's now apparent:

   • The photo disappears behind the navbar because Figma positions scroll targets at the very top of the viewport.
   • The text, which was carefully centered in the photo, now appears off-center due to the partially obscured image.
   • While the blurred navbar background creates an attractive layering effect, it compromises the design's intended visual balance. Professional prototypes require precise positioning that respects fixed elements.
3. Close the presentation and return to edit mode.
4. Click in an empty area to deselect all elements, then hold Cmd (Mac) or CTRL (Windows) and select the Maui text in the navbar.
5. In the Prototype panel, click on the existing Click interaction to access its settings.
6. The navbar measures 75 pixels in height. To ensure content appears below rather than behind the fixed navbar, set the Y-Offset (the first of the two offset numbers) to -75. The negative value pulls the scroll position up, accounting for the navbar's height.
7. Apply the same offset to maintain consistency across all navigation elements. Hold Cmd (Mac) or CTRL (Windows) and select Kauai in the navbar.
8. In the Prototype panel, click on the Click interaction.

9. Set the Y-Offset to -75, ensuring both navigation links behave identically.

10. Test the improved positioning by clicking Present or using Cmd–Option–Return (Mac) or CTRL–ALT–Enter (Windows).

11. Click Maui in the navbar—the photo now appears perfectly positioned below the navbar, restoring the intended visual hierarchy and text centering.

12. Verify that Kauai exhibits the same precise positioning behavior.

13. Close the presentation tab. You've now mastered offset positioning, a crucial technique for creating polished prototypes that account for fixed interface elements.

Creating a Scrollable Area Within a Page

Scrollable content areas maximize screen real estate and create engaging interactive experiences. This technique is particularly valuable for showcasing wide content like panoramic images, product galleries, or data tables within constrained layouts.

1. Scroll down to locate the second photo in the Maui section—it's positioned above the text Mt. Haleakala's southern face is vastly different from the north.

2. This panoramic image extends far beyond the visible frame boundaries. Hold Cmd (Mac) or CTRL (Windows) and click directly on the photo to select it despite its nested group structure.

   Notice how the image extends beyond the right edge of the frame—this extra content is currently clipped and invisible, but we'll make it accessible through horizontal scrolling.

3. To create scrollable behavior, the image must be contained within its own frame. CTRL–click (Mac) or Right–click (Windows) on the photo and choose Frame selection.

   • In the Design panel, enable Clip content to hide overflow content beyond the frame boundaries—this is essential for controlled scrolling behavior.
   • Resize the frame to match the visible page width by dragging the right edge inward. The frame should encompass only the currently visible portion of the image, leaving the panoramic extension as hidden, scrollable content.

4. In the Prototype panel, set Overflow scrolling to Horizontal scrolling. This tells Figma to make the overflowing content accessible via horizontal scroll gestures.

5. Test your scrollable area by clicking Present or using Cmd–Option–Return (Mac) or CTRL–ALT–Enter (Windows).
6. Navigate to the photo in the Maui section by scrolling down.

7. Interact with the panoramic image by dragging left and right directly on the photo to reveal the hidden portions. This creates an immersive experience that lets users explore the full panoramic view at their own pace.

   NOTE: You can also scroll horizontally by holding Shift while using your mouse scroll wheel—this is particularly useful when presenting to stakeholders using traditional mice.

8. Keep the presentation open and switch back to your file for the next section. You've successfully created an interactive content area that enhances user engagement while maintaining clean layout constraints.

Adding Hyperlinks

External links bridge your prototypes with real web content, creating more realistic user testing scenarios and demonstrating how your designs connect to broader digital ecosystems. This is particularly valuable when presenting to stakeholders who need to understand the full user journey.

1. Scroll to the bottom of the design and zoom in to clearly read the Text Copyright website URL.
2. Double-click on the copyright text and carefully select only the URL portion (the complete http web address).
3. In the top toolbar, click Create link . Figma will automatically detect the URL format from your selected text.
4. The URL field should populate automatically with your selected text. Press Return (Mac) or Enter (Windows) to confirm the link creation.
5. Test the external link functionality by clicking Present or using Cmd–Option–Return (Mac) or CTRL–ALT–Enter (Windows).
6. Scroll down and click the Text Copyright website link at the bottom of the page.
7. If prompted with a security message about leaving figma.com, click through to continue—this is a standard browser security feature when navigating from one domain to another.
8. Close the presentation tab. You've now integrated external web connectivity into your prototype, creating a more comprehensive and realistic user experience demonstration.

Optional Bonus: Scrolling to the Top of the Page

Complete your navigation system by adding a "return to top" function—a UX best practice that provides users with a quick way to reset their position in long-form content.

1. Click in an empty area of the canvas to ensure no elements are selected, then scroll to the top of the page for better visibility.
2. Scroll to the top of the design to access the header area.
3. In the Layers panel, expand the navbar group and select the Hawaii logo—logos are conventionally linked to home or top positions in web design.
4. Ensure the Prototype panel is visible in the right sidebar for interaction setup.
5. A blue connector circle will appear near the Hawaii logo. Drag this circle down to any point on the header photo, just below the navbar area, to set the scroll target.

6. In the Interaction details popup, verify that Animation is set to Animate for smooth scrolling consistency with your other navigation elements.

7. Test the complete navigation system by clicking Present or using Cmd–Option–Return (Mac) or CTRL–ALT–Enter (Windows).
8. Click Maui in the navbar to scroll down and test your existing functionality.
9. Click the Hawaii logo to smoothly return to the top of the page—this completes the navigation loop and provides users with intuitive wayfinding throughout your prototype.

10. Close the presentation tab. Congratulations! You've built a comprehensive, professional-grade navigation system with smooth scrolling, fixed positioning, precise targeting, scrollable content areas, external links, and complete user flow coverage.