Create clickable, live prototypes in Sketch

16. Open InVision

Now that we're just about ready to save our screens as PNGs, let's log into InVision and make a project to hold them. After making your Tracker Keeper project folder, make sure you grab the InVisionSync app – you can also upload through the web, but the Sync app does such a nice job of helping things along.

17. Export artboards to InVision

Exporting your artboards as PNGs

Exporting your artboards as PNGs

Back inside Sketch, we're now going to export our artboards as PNGs. You can do this from the bottom of the Inspector palette, or with the 'Export' button in the right of the main toolbar. When exporting multiple artboards, the file names will be the same as the artboard name. This makes for some nice parity between your Sketch document and the names of different screens inside InVision.

18. Syncing screens

Save the PNGs inside your InVision folder, where you'll find a newly created 'Tracker Keeper' folder. Inside this, there will be a 'Screens' folder.

19. Enter Build Mode

Once you've uploaded the screens into InVision, head back into the web interface and open the project. While viewing the main screen, we're going to enter Build Mode. You can do this using either the icon in the bottom centre of the screen, or simply by pressing B.

20. Making hotspots

Draw hotspots to create a living mockup

Draw hotspots to create a living mockup

With Build Mode active, click and drag to draw a hotspot with blue highlight around the menu button. This hotspot is the key to creating a living mockup out of flat PNGs. Essentially, we're making an image map with actions tied to each hotspot we build.

21. Adding animations

We're going to link our new hotspot to our 'home-menu-open' screen, and select the animation we want. Since our menu is designed like an off-canvas tray, let's select a Push Right animation.

22. Test your hotspots

Hop back into Preview Mode, either with the icon in the bottom centre of the screen or by pressing P, and test the new hotspot. Clicking it should make the menu open. Now viewing the 'menu-home-open' screen, let's make another hotspot that lets people hide the menu. Enter Build Mode, draw out a new hotspot, and link it back to the 'home' screen.

23. Check the app on device

Now would be a good time to check this app out on your actual device. Either click Share and grab the link yourself, or use the SMS service to send a link right to your phone. Once you open the link, make sure to Add to Home Screen to get the full effect (InVision lets you set an icon, startup image and so on).

24. Make your edits

You know what? Now that I see this on my device, that neon bar in the header is a bit too loud. Let's hop back into Sketch and tone it down, making it a nice deep purple. Of course, when you edit the header Symbol in one place, it automatically updates all subsequent instances. And no, I don't really care about the purple, I just wanted to show you how easy it is to manage changes within your living mockup.

25. Export

Select your artboards again, and let's export. Save them to the same folder as before – replacing the old files – and InVision will take care of the rest. Your updated look (with purple header) will automatically show up in all InVision mockups, even those being viewed on a mobile device (or live in browser).

26. Enjoy your editable, live prototype

Of course, all of your hotspots and settings for each screen will remain intact. This means you can change out design details – or even whole screens – and you'll still be left with a clickable, live prototype.

27. Rinse and repeat

That's almost it! Now you just need to rinse and repeat. Make changes, see them live on your device, share them with people.

This article originally appeared in net magazine issue 263

Words: Clark Wimberly

Liked this? Read these!