Turning a Design into a Clickable Prototype

Topics covered in this Adobe XD tutorial:

Linking between artboards, Previewing the prototype, Creating an overlay, Background blur, Fixing the position of elements so they don’t scroll, Making a recording of a prototype

Exercise Preview

prototyping.jpg" alt="preview prototyping">

Exercise Overview

In this exercise, you’ll learn how to prototype some interactivity for a design so you can click/tap between screens and see how a website or app would work. This is a great way to show a design to clients, or do some user testing.

Creating a Prototype

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 > Pulse and double–click on Pulse - Ready for Prototyping.xd to open it.

   This design is very similar to the previous exercise, except:
   • The navbar at the top of the page is a bit different.
   • There is a new artboard for the design of the nav menu. When someone taps on the menu icon in the navbar, the nav menu would appear over the screen.
3. At the top left of the window click Prototype.
4. Zoom to 100% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows).
5. XD needs to know which screen to show first. This is called the Home screen. Notice the blue home icon at the top left of the Autumn Collection artboard indicates it’s currently the Home screen.
6. We want the Home Page artboard to be the Home screen. At the top left of the artboard, click on the Home Page artboard name.

7. As shown below, at the top left of the Home Page artboard click the gray Home icon so it changes to blue.

   

8. Above the artboard Flow 2 will appear. Double–click on Flow 2 and rename it Pulse Main Flow.

   NOTE: You can have multiple user flows (showing different possible paths), each of which can be named.

9. We don’t want the Flow 1 that was already started in this file, so click the blue Home icon for the the Autumn Collection artboard to uncheck it.
10. Click onto an empty part of the canvas to deselect.
11. Near the top of the Home Page artboard, select the Shop New Collection button.
12. To zoom out and see all the artboards, zoom to fit all by hitting Cmd–0 (Mac) or Ctrl–0 (Windows).
13. To the right of the selected button, there’s a blue arrow. Drag that blue arrow onto the Autumn Collection artboard to create a link.

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

    • Trigger: Tap
    • Action: Transition
    • Leave Preserve Scroll Position unchecked.
    • Destination: Autumn Collection (will already be set)
    • Animation: Slide Left
    • Easing: Ease Out
    • Duration: 0.4 s
    • Leave Fix Position When Scrolling unchecked.
15. On the Autumn Collection artboard, double–click on the top left photo (Distressed Denim Jacket) in the product grid of 4 photos. (The double–click should go into the repeat grid and select the photo.)

16. Drag the blue arrow onto the Product Page artboard to create a link.

Previewing the Prototype

1. Click onto an empty part of the canvas to deselect.

   We make sure nothing is selected so the preview will start on the Home screen. If an artboard is selected, the preview will open to the selected artboard.

2. At the top right of the window, click the Desktop Preview button .
3. A preview window will open and you should see the Home Page. Click on the Shop New Collection black button and it should animate to the other artboard!
4. Click on the Distressed Denim Jacket photo to go the product page.
5. Hit the Left Arrow to go the previous artboard (the Right Arrow also works to navigate between artboards).

6. Close the preview window.

Wiring Up the Navbar & Creating a Nav Menu Overlay

1. If the Libraries panel is not open, at the bottom left of the window click the  icon.
2. In the Libraries panel, Ctrl–click (Mac) or Right–click (Windows) on the navbar component and choose Edit Main component.
3. Zoom to the selection by hitting Cmd–3 (Mac) or Ctrl–3 (Windows).
4. Let’s make the logo take us to the homepage. Double–click on the black background of the navbar to go into the component. You won’t see anything change, but you will now be able select things inside this component.
5. Hover over the PULSE logo and when you see a blue outline around the logo click once to select the logo.
6. A blue arrow will appear to the right of the logo. Click the blue arrow.

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

   • Trigger: Tap
   • Action: Transition
   • Leave Preserve Scroll Position unchecked.
   • Destination: Home Page
   • Animation: Slide Right
   • Easing: Ease Out
   • Duration: 0.4 s
8. Hover over the menu icon (the three white lines) and when you see a blue outline around it, click once to select.
9. To see all the artboards, zoom to fit all by hitting Cmd–0 (Mac) or Ctrl–0 (Windows).
10. Drag the blue arrow from the menu icon onto the Nav Menu artboard.

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

    • Trigger: Tap
    • Action: Overlay
    • Destination: Nav Menu (will already be set)
    • Animation: Slide Down
    • Easing: Ease Out
    • Duration: 0.3 s

12. Click onto an empty part of the canvas to deselect.

    XD automatically closes an overlay when you click it, so we don’t have to do anything to make the X close button on the Nav Menu actually close the overlay!

13. At the top right of the window, click the Desktop Preview button .

    TIP: To open the preview you can hit Cmd–Return (Mac) or Ctrl–Enter (Windows).

14. The preview window floats above the XD file, so you can still interact with your design and see the preview update. For example:

    • Click on the Autumn Collection artboard to change focus from the preview window to the XD file.
    • Click once more on the Autumn Collection artboard to see it appear in the preview window.
15. Click on the preview window to activate it.
16. Click on the menu icon in the navbar to see the Nav Menu appear.
17. Click the X close button (or anywhere else on the overlay) to close the menu.
18. Click on the PULSE logo in the black navbar to go to the Home Page.

19. Notice that the height of the preview is the size of a phone, and you must scroll down to see the rest of the design. (You won’t see scrollbars, but you can drag up and down like you would on a touchscreen device, or use your scrollwheel or trackpad to scroll.)

Changing the Design

1. Close the preview window.
2. At the top left of the window, click on Design.
3. Click on the Autumn Collection artboard name to select the artboard.
4. In the Property Inspector, notice that Viewport Height is set to 667.

5. Near the top of the Property Inspector, notice that H (height) is 1435, which is much taller than the Viewport Height.

   Viewport height refers to the height of the device. An artboard that is taller than the viewport height will scroll. When creating an artboard using a device preset (like iPhone) the viewport height will be set automatically. When you change the height of the artboard, the viewport height remains unchanged.

6. Select the main instance of the navbar component that’s to the right of all the artboards.
7. Zoom to the selection by hitting Cmd–3 (Mac) or Ctrl–3 (Windows).

8. The menu icon is in an unusual place in the navbar. Menu icons are typically on the left or right side of the screen. Let’s move the logo over a bit to make space so we can put the menu icon in the left corner.

   Hover over the PULSE logo and when you see a thin outline around it, double–click select the logo.

9. Hold Shift and press the Right Arrow key 5 times.
10. Select the menu icon in the navbar.
11. Hold Shift and drag the menu icon (three white lines) into the space you just made to the left of the logo.

12. Zoom to fit all by hitting Cmd–0 (Mac) or Ctrl–0 (Windows).

Background Blur

Blurred backgrounds are used throughout the iOS interface. For webpages viewed in Safari, we can also blur backgrounds using CSS. That doesn’t yet work in other browsers, but it can still can be used as progressive enhancement. Let’s see how to create a background blur in XD.

1. Zoom to 100% by hitting Cmd–1 (Mac) or Ctrl–1 (Windows).
2. In the Nav Menu artboard (the left-most artboard), click on the dark background that covers the artboard.
3. In the Property Inspector, set Opacity  to 100%.

4. In the Property Inspector, check on Background Blur and set the following options (for Blur Amount, Brightness, and Effect Opacity):

   

5. Click onto an empty part of the canvas to deselect.
6. At the top right of the window, click the Desktop Preview button .
7. Click on the menu icon in the navbar to see how the background blur looks when the menu is on top of page content. Cool!
8. Click the X close button to close the menu.

9. Scroll down and notice the black navbar (at the top) scrolls out of view.

   Let’s see how to fix the navbar to the top of the screen.

10. Close the preview window.

Fixing the Position of Elements So They Don’t Scroll

1. Zoom to fit all by hitting Cmd–0 (Mac) or Ctrl–0 (Windows).
2. Select the navbar on the Home Page artboard.
3. Holding Shift and click on the navbars on the Autumn Collection and Product Page artboards.
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. In the preview window, scroll down and notice the navbar stays at the top of the screen and the rest of the content scroll under it.
7. Close the preview window.
8. This prototype is done! Save the file.

Optional Bonus: Making a Recording of a Prototype

XD on a Mac can record a video of you interacting with a prototype. This can be useful for getting client feedback, showing work in your portfolio website, and more.

XD on Windows does not have a built-in recording. Instead you can use the Win–G keystroke to record using the Windows Game recording tool but we do not have instructions for that process.

1. Click onto an empty part of the canvas to deselect.

2. At the top right of the window, click the Desktop Preview button .

   • Mac: At the top right of the preview window, click the Record button to start recording.

   • Windows: Hit Windows–G to record using the Windows Game recording tool (and then follow the onscreen prompts).

3. Click on the Shop New Collection black button.
4. Click on the PULSE logo to go back to the Home Page.
5. Click the menu icon to open the nav menu.
6. Click the X close button to close the menu.
7. At the top right of the preview window, click the Record button again to stop recording.
8. In the dialog that appears, navigate into Desktop > Class Files > Adobe XD Class > Pulse.
9. Name the file Pulse Demo.mp4
10. Click Save.
11. Close the preview window.
12. Let’s look at the movie we just exported. Keep the file open in XD, but switch to the Desktop (the Finder on Mac or Windows Explorer on Windows).
13. Navigate into Desktop > Class Files > Adobe XD Class > Pulse.

14. Double–click on Pulse Demo.mp4 and play the movie!

    NOTE: Think about what you want to show and the speed of your interactions. The recording is done in real time, so consider how long the viewer may need to look at a screen and figure out what’s going on. Be careful with the cursor position. Use it to draw attention to important things and try not to be distracting with it.