how to create clickable , live prototype in sketch

Author +Clark Wimberly      You Can find detailed Article on .net Magazine   net Magazine is the world's best-selling magazine for web designers and developers
website: clarklab.com
 twitter: @clarklab
 job: UX designer
Source-.net Magazine


Watch Video


 First, create a new Sketch document. Inside, we’re going to make two artboards, one for the normal home view, and one for the open menu view. Press  A  to bring up the Artboard tool, which has popular screen resolutions built-in. Select  iPhone Portrait .

•  Click anywhere in your canvas to create a new artboard. Rename it ‘home’, either with  cmd+R  or by right-clicking and hitting  Rename . This artboard will be the ‘home view’ of your app. Press  cmd+D  to duplicate the artboard, and change the newly created screen’s name to ‘homemenu-open’.

•   Inside the ‘home’ artboard, we’re going to create a standard app header. Press  R  to select the Rectangle tool, and draw out a 640x90 rectangle at the top of the artboard. Rename this shape ‘header-bg’.

•   The tools palette on the right-hand side of Sketch is called the Inspector, and it’s where you’ll find all the properties of shapes, text, groups and more. With the ‘header-bg’ object selected, let’s turn off the border and pick a fill. My app is flashy, so I’ve picked a neon gradient. While we’re at it, let’s set a background colour – white – for our artboards. Check the ‘Include in export’ option, which will ensure our app screens don’t come out transparent. 

•  For the rest of the header, let’s add a menu icon, and app title, and an action button. I’m making my hamburger icon from scratch by drawing out three identical rectangles. I’ll also group them for easy positioning (slightly off the left edge).

•   Press  T  to enter some text, and key in the title of your app. I’m building an internal activity tracker, so I’m going with ‘Tracker Keeper’. The font size, colour and spacing is located in the Inspector panel on the right. 

• On the right side of the header, I’ve added a ‘plus’ icon, which would be used to let the user add an activity to the stream. Again, I’ve drawn this icon myself. 

•  Once our header is done, we’re going to convert it into a Symbol, which means we’ll be able to use it again and again around our document. By converting our header into a Symbol, we can apply it to the second screen, and any changes to either header will be reflected in the opposite header.

•   To make a group, select the rectangle, icons and text we just created and press  cmd+G .  We want to rename this group to something clear, so press  cmd+R  and type ‘header’. In the layers list, right-click your ‘header’ group and pick  Create Symbol . A Symbol is denoted in the layers list by a purple-coloured folder. Keep an eye on all purple folders, as changing one will result in all others being updated. With great power comes great responsibility

• Still on the ‘home’ artboard, we can start to build our activity timeline. This example app will collect and display positive comments from one team member to another. Let’s make a single comment. I’ll make a circle using the Oval tool, and place an icon inside using Symbolset (one of my favourite font tools). I’ll also add some text and a timestamp

•  Like we did with the header, let’s round up the elements we just created and turn them into a group ( cmd+G ). Rename the group ‘comment’, then turn it into a Symbol. With the ‘comment’ Symbol selected, choose  Arrange   > Make Grid . We’re going to make a grid with five rows (with a 40px margin) and one column, giving us a single stack of comments, similar to Twitter. 

•  For the sake of making an interesting mockup, let’s change the comment text inside each instance of the Symbol. Simply select the text layer and find the ‘Exclude Text Value From Symbol’ checkbox in the Inspector palette. Move down the line and change each comment to something inspirational and more becoming of an awesome startup. At this point, I’ll also change each time stamp and name. 

• With your basic homescreen now complete, we’re going to copy the entire screen into your other artboard, ‘home-menuopen’. This artboard will capture what the homepage looks like with the menu open. Select our current elements and then duplicate them  ( cmd+D ). Drag your new layers into the ‘home-menu-open’ artboard. Since everything we just duplicated is a Symbol, any changes you make on the ‘home’ artboard will be reflected on the ‘home-menu-open’ artboard. 

•  For our sample app, we’re going to make a pretty simple menu. Using the rectangle tool, I’ll draw two shapes: a white box on the left side of the screen, and a coloured box on the right, to act as the overlay. Using the Text tool, let’s add some menu items to our fake app. We’re getting close to making this thing come alive! 

• With Sketch, exporting screens (and assets, slices and so on) is super easy. Simply select your artboards in the layers list, then find ‘Export’ over in the Inspector palette. As our artboards are already sized correctly, let’s just go with 1x PNG files. If you were making real assets, here’s where you would crank out all your varying sizes and formats. Handy

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

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

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

•  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 

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

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

•  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 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).

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

•   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).

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

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