Creating a Clickable Prototype with Sketch’s Native Tools

Topics covered in this Sketch tutorial:

Creating a Prototype, Linking between artboards, Fixed Position Elements

Exercise Preview

prototyping.jpg" alt="preview prototyping">

Exercise Overview

In this exercise, you’ll learn how to turn a Sketch design into a clickable prototype. You can click between screens and see how the website or app would work. This is a great way to show a design to clients, or do user testing.

Creating a Prototype

1. In Sketch, go to File > Open Local Document.
2. Navigate into Desktop > Class Files > Sketch Class > Pulse and double–click on Prototyping.sketch to open it.
3. Let’s start adding prototype interactions. Make sure you can see the Home Page artboard as well as the Autumn Collection artboard to its right.
4. On the Home Page artboard, select the Shop New Collection button.

5. Go into the Prototyping menu and choose Add Link to Artboard.

   NOTE: The keyboard shortcut for this is W (as in for wire… because we’re wiring up the prototype).

6. Click on the Autumn Collection artboard.

7. In the Inspector on the right:

   • In the Prototyping section, notice that Target has been set to the artboard we clicked on.

   • Under Animation, click on the Animate Artboard from Right button .

8. Let’s create one more link before we preview this. Make sure you can see the Autumn Collection artboard as well as the Product Page to its right.
9. On the Autumn Collection artboard select the Distressed Denim Jacket photo. The photo and type will be selected because they are all in a symbol.
10. Hit the W key.
11. Click on the Product Page artboard.
12. To preview what we’ve done, near the top right of the Toolbar, click the Preview button (or go to Prototype > Preview Prototype).
13. If the preview window is not showing the Home Page, choose it from the menu at the top of the preview window.
14. Click on the Shop New Collection button and it should animate over to the Autumn Collection artboard.
15. Click on the Distressed Denim Jacket photo or type to go to the next screen. Cool!
16. At the top of the preview window, click the back arrow twice to return to the Home Page.
17. We always want this to be the starting screen, so at the top of the preview window click the Start Point button .
18. Close the preview window.

19. To the left of the Home Page artboard name, notice there’s now a flag icon which indicates this is the start point.

    NOTE: Another way to set the starting point, is to select the artboard and choose Prototype > Use Artboard as Start Point.

Wiring Up the Navbar

1. Double–click on any of the black navbars to edit the symbol.
2. Click on a blank area of the canvas to deselect.
3. Select the Pulse logo.
4. We’re on the Symbols page and can’t see the artboard we want to link to, so in the Inspector, to the right of Prototyping click the plus + button.

5. In the Inspector:

   • From the new Target menu that appeared choose Screens > Home Page.
   • Under Animation, click on the Animate Artboard from Left button .
6. While we’re here, let’s also wire up the menu icon. To the right of the navbar symbol, select the 3-lined “hamburger” menu icon on its own symbol artboard (NOT the one in the navbar).

7. In the Inspector:

   • To the right of Prototyping click the plus + button.
   • From the new Target menu that appeared choose Screens > Nav Menu.
   • Under Animation, click on the Animate Artboard from Top button .
8. To the right of the menu symbol, select the the X close button on its own symbol artboard (NOT the one in the navbar).

9. In the Inspector:

   • To the right of Prototyping click the plus + button.
   • From the Target menu choose Previous Artboard.
10. At the top left of the Sidebar, click on the Screens page to get back to our design.
11. On the Nav Menu artboard, click once on the navbar to select the symbol.

12. In the navbar symbol, our 3-lined “hamburger” menu icon is a symbol. As you saw on the symbols page, we also made a close button symbol. It’s the same exact size as the menu icon so we’ll be able to swap it out as an override (as we learned about in a previous exercise).

    In the Inspector, under Overrides click on the menu below Menu Icon and choose close.

13. Near the top right of the Toolbar, click the Preview button (or hit Cmd–P).
14. You should start on the Home Page, so click on the Shop New Collection button and it should animate over to the Autumn Collection artboard.
15. Click the Pulse logo in the navbar and it should return you to the home page.

16. Click the 3-lined “hamburger” menu icon on the left of the navbar to go to the nav menu screen. Notice two things:

    • It took us to that artboard, but we really wanted it to slide down over the existing screen so we could transparently see the background. As of this writing, Sketch cannot yet overlay artboards but the makers of Sketch have publicly announced that feature will be coming soon.
    • While we’re here, scroll down and notice the navbar scrolls off screen. This may be the desired behavior, but let’s see how to fix the navbar to the top so it’s always visible.

17. Scroll back up and click the X close button to return to the previous screen.

    Swapping out the nested symbol used its artwork and prototyping wire!

18. Close the preview window.

Fixing the Position of Elements So They Don’t Scroll

1. Select all 4 of the black navbars at the top of each artboard (click on one, then hold Shift and click on the others).
2. In the Inspector, check on Fix position when scrolling.
3. Near the top right of the Toolbar, click the Preview button (or hit Cmd–P).
4. Scroll up and down to see that the navbar remains at the top of the screen.
5. Close the preview window.
6. Click in an empty area of the canvas to make sure nothing is selected.
7. If you see all the prototyping wires, you can hide them by choosing View > Show Prototyping (to uncheck it).
8. Save and close the file.