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

Topics covered in this Figma 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, Adding Hyperlinks

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to create a prototype with links that scroll you up or down a frame. You’ll also learn how to make a specific part of a page (frame) scrollable. Lastly you’ll add a hyperlink that takes you to a webpage.

Opening the File

1. In Figma, if you’re not on the homescreen (file browser), do the following:

   • 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 open a local file, click Import file (may be an icon near the top right).

3. Navigate into Desktop > Class Files > Figma Class and double–click on Scrolling In a Page.fig to choose it.

   Once the file has uploaded, click Done and double–click on the file to open it.

Adding Links to the Navbar

1. In the right panel, at the top click on Prototype.
2. Zoom in so you can see at least the top of the frame and the Maui title photo (you don’t have to see the whole thing).
3. 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 several groups deep, so in the navbar hold Cmd (Mac) or Ctrl (Windows) and click on Maui to select it.
4. Hover over any side of the Maui text and a blue circle will appear. Drag the blue circle down to the Maui photo below.

5. In the Interaction details pop-up that appears:

   • It will already be set to Scroll to with the proper destination.
   • There’s no animation set, so the link would immediately jump down. Let’s have it slide down instead. Under Animation change Instant to Animate.
6. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).

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

8. Close the presentation tab (or window).
9. Let’s add another link. Hold Cmd (Mac) or Ctrl (Windows) (so we can reach into groups) and in the navbar click on Kauai to select it.

10. 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.

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

11. Below Interactions click on the Click —> None interaction and then:

    • Change None to Scroll to.
    • To the right of Scroll to change None to Kauai (this is the name of the group).
    • Under Animation change Instant to Animate.
12. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).

13. Click on Kauai in the navbar to see that work.

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. Keep the presentation tab (or window) open, and switch your file’s tab/window.

2. In the Layers panel, in the Header group:

   • Collapse the navbar group by clicking its arrow.
   • Select the navbar group.
3. In the right panel, at the top click on Prototype.

4. In the Prototype panel, notice there’s no Scroll behavior (where we set Fixed position).

   Why? A fixed position item must be directly inside the frame, not nested in a group.

5. In the Layers panel, drag the navbar group above the Header group (outside the Header group).
6. In the Prototype panel, under Scroll behavior set Position to Fixed (stay in place).
7. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).
8. Scroll down/up to see the navbar stays fixed at the top of the screen.

9. Click on any of the navbar items to scroll up or down.

Adjusting the Position of the Scroll

1. Still in the prototype, in the navbar click on Maui to scroll there.

2. Notice the following:

   • The photo is behind the navbar, because Figma 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.
3. Close the presentation tab/window.
4. Click in an empty area to make sure nothing is selected.
5. Hold Cmd (Mac) or Ctrl (Windows) and in the navbar select Maui.
6. In the Prototype panel, under Interactions click on the Click interaction.
7. Our navbar is 75 pixels tall, so below Scroll to, set Y-Offset (the left of the 2 numbers) to -75 and don’t miss the minus part!
8. We need to do the same thing to Kauai. Hold Cmd (Mac) or Ctrl (Windows) and in the navbar select Kauai.
9. In the Prototype panel, under Interactions click on the Click interaction.

10. Below Scroll to, set Y-Offset (the left of the 2 numbers) to -75 and don’t miss the minus part!

11. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).

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

    Now the photo should start below the navbar.

13. In the navbar click on Kauai to see it does the same.

14. Close the presentation tab/window.

Creating a Scrollable Area Within a Page

1. 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.

2. The photo is nested in groups, so hold Cmd (Mac) or Ctrl (Windows) and click on the photo to select it.

   Notice how wide this photo is. It hangs off the right side, outside the frame (you can’t see the outside part because the parent frame is clipping the contents).

3. To make this a scrollable area we must put the photo into a frame. Ctrl–click (Mac) or Right–click (Windows) on the photo and choose Frame selection.

   • Let’s hide anything that would appear outside the frame. In the Design panel check on Clip content.
   • We need to make the frame smaller so the image inside it is larger than the frame. Grab anywhere on the right side, and drag it in so the frame ends up the width of this page (the visible part of the photo).

4. In the Prototype panel, set Overflow scrolling to Horizontal scrolling.

5. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).
6. Scroll down to that photo in the Maui section.

7. Scroll horizontally through the panorama photo (you can drag right/left on the photo) to see the hidden part. Cool!

   NOTE: You can also scroll horizontally by holding Shift scrolling with your mouse.

8. Keep the presentation tab (or window) open, and switch your file’s tab/window.

Adding Hyperlinks

1. Scroll to the bottom and zoom so you can read the Text Copyright website.
2. Double–click on the text and select the URL (the http website address).
3. In the navbar at the top, click Create link .
4. The URL should already be filled out, so hit Return (Mac) or Enter (Windows) to accept it.
5. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).
6. Scroll down and click the Text Copyright website at the very bottom.
7. If you get a message about leaving figma.com, click the link to continue.
8. Close the presentation tab/window.

Optional Bonus: 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. Scroll to the top of the page.
3. In the Layers panel, inside the navbar group select the Hawaii logo.
4. Make sure the Prototype panel is visible on the right.
5. A blue circle will appear to the right of the Hawaii logo. Drag the blue circle down slightly below the navbar to anywhere on the header photo and release.

6. In the Interaction details, under Animation make sure it’s set to Animate.

7. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).
8. In the navbar click on Maui to scroll down.
9. Click on the Hawaii logo to scroll back to the top of the page.

10. Close the presentation tab/window.