Live Prototyping with InVision Craft Prototype in Sketch

Still in Beta but…Woohoo! 🙌 No more switching apps for prototyping!

📣 [May 2017] Some features that reviewed here are taken out by InVision, like Launch Camera & Browse Photos etc. Head over my new article below for the latest InVision Craft Prototype review.

Prototyping in Sketch is officially available now and here is my review! 🎉

A few days back I saw the friendly

Charles Pearson

announcing on twitter, that if you want to try out Craft Prototype, ping him for an activation code! I was so excited and immediately requested for a code. Once I got the code, I started playing with Craft Prototype in Sketch on of my previous projects and it is awesome! The experience is so smooth~ You guys should ping him for a code to try Prototype too!

As some of you might know, InVision acquired Silver Flows, a tool to build lightweight mobile prototypes directly in Sketch. At that time, Silver was still in private beta. Now they have integrated into InVision Craft in just 3 months! Well done InVision and Silver Flows team! 👏

My experience with Prototype in Sketch so far has been awesome! Unlike other prototyping tools, you no longer need to export and import the assets anymore. Just design the screen and link it up!

There are many external interactions that Prototype can achieve! For instance, you can have a real working text input field, launch the Camera app, browse iOS Photos app and place it in a container layer, link to websites, compose an email or SMS, and even make a phone call with your prototype! 😱

You can implement Fixed Headers and Footers with Prototype too.

Now let’s start to play with Prototype!

Initial Screen

Once you have set up and switched the Craft Manager to Prototype Beta mode, you can see a new icon showing up in the Craft panel in Sketch.

Left: Empty Sketch file, Right: Sketch file with artboards

First, you will need to click Select Initial Screen for the prototype. This will be the first screen you will see in your device once you open the prototype in InVision Viewer iOS app.

There is a triangle shape on the top right of the artboard layer that indicates it is the Initial Screen.

Fixed Header and Footer

Once you have created the prototype and set up the initial screen, the Prototype modal box will become like this:

Let’s talk about Other Actions first. Inside Other Actions, there are four menus, Fixed Header, Fixed Footer, Web View and Input Field. It is super easy to create fixed headers and footers in Prototype. Just select the header you want to be fixed, and then click on the Fixed Header button. The same steps apply to Fixed Footer too.

Remember, the artboard needs to contain all the content you wish to scroll and view. Like the example below, my artboard is about 750 height at 1x. And when you view on your device, the footer will always stick to the bottom, no matter if your device is iPhone 4 or 5 or 6. Useful! 👍

Remember to expand the artboard to show all the content you want in scroll view

Here is the demo of Fixed Header and Footer in iPhone 4s

Web View

Web View comes with two options: Website URL and Embed. Website URL is as simple as entering the URL. But I am not sure when we will use this interaction in a prototype. One of the use cases I can think of linking to an FAQ or Service Terms page for your prototype. Or if your app contains a webview function similar to Twitter’s.

Just enter any URL you want to view, best is the website have responsive

Remember to set a Link Back button on the WebView artboard

Another option is Embed, you can get any embed code from YouTube, Vimeo, Google Map etc and paste it into the text field in the Embed tab.

But I have a problem setting the exact width and height to fit the iPhone 5s screen although I have checked “Scale content to fit bounds”. And the help icon is a missing page too, hope the InVision team will have the proper help page when Prototype is launched.

You can Download this Sketch file to play around with Web View.

Embed code is easy to find from the web

Here are the examples of Vimeo and Google Maps. Notice that you can still interact with the map through pinch to zoom

Input Field

Holy sh!t~ This is the most exciting feature in prototyping! Most of the other prototyping tools either don’t have this feature or require complex code to get this done. We no longer need to design the screen that appears after text is entered, and user testing and interaction will feel more real with the prototype, hooray~! 🙌

There are plenty of Basic and Advance options for Input Field

The outcome is awesome!!!

Linking Up Artboards

Let’s prototype the first interaction, linking from one screen to another. Select a layer that will trigger the link and then press C, you will see the layer with a blue box. The blue line is to choose which artboard you want to link.

Once you hover and click on another artboard, there will be a pop up dialog screen that lets you choose the interactions: Gesture, Behavior, and Animate In. You can choose Show as Modal if the interaction is for menu slide in or some pop-up message etc.

There are quite a number of interaction options to choose from and all of them are native animations on iOS devices 👍

Modal Screen

The modal screen is quite easy to achieve too. Remember to uncheck artboard Background Color so that the screen below can be seen. Download this Sketch file to play around with the modal screen.

Other Awesome Interactions

As I have mentioned just now, there are more interactions you can do with Craft Prototype that you might find quite hard to achieve with other prototyping tools. When you select an artboard and press C, you will see the Prototype dock appear on the top of Sketch. Drag the blue line to the interaction you wish to add to the layer. Here are some of the interactions:

There are three groups of interactions you can choose

From left to right: Link Back, Dismiss a Modal, Dismiss Keyboard, Launch Camera, Browse Photos, Link to a Website, Compose an Email, Compose SMS, and Call a Phone.

Link Back

The first interaction, Link Back is allow users to go back to the previous artboard that links to this current artboard. Just like the icon depicted, we will use this interaction for most of the back buttons in your prototypes.

Dismiss a Modal

Closes the overlay screen that appears on top of the artboard, we will use this to dismiss pop-up dialog message, hamburger menu slide in etc in the prototype.

Dismiss Keyboard

Let’s say you are prototyping an onboarding screen and you have entered your email and password. Some apps will have a Done button on the top right of the keyboard and pressing on that will bring you to a success screen, so you may add this interaction to dismiss the keyboard after you enter the password.

Launch Camera & Browse Photos

These are two awesome interactions too!

For example, when you have a profile screen, you can use this interaction to take a photo or upload your profile picture and place it into a layer which needs to be named “_photo”. No matter where you add the “_photo” suffix, either outside or inside a group folder, Prototype is able to search for it and place your photo. Check out the demo below.

Notice the “_photo” layer, just name it and Prototype will do the rest of the job

Launch Camera demo, this time on iPhone 5s

Browse Photo demo

Note: Once you have taken a photo or chosen a photo to place into the “_photo” layer, the photo will disappear if you navigate away from this screen.

I don’t think I explained this feature well, so here is the Sketch file for Launch Camera and Browse Photos prototype, if you have installed Craft Prototype you can download and play with it. 😅

Link to a Website

Assign this interaction to a button, then it will open up the link in the browser.

Compose an Email, Compose SMS, Call a Phone

Using these interactions will open up your Mail app, Messages app, and Phone app. Just like what you think and they work like a charm!

Remove Prototype Links and Components

You can remove prototype links one by one or remove all by selecting artboard and clicking on the “Clear Components in Artboard” and check which interactions you want to remove in batch.

My Thoughts for the Beta

Everything in the beta is so smooth and fast. I even used Prototype just to mirror the design to view on my phone. Sketch Mirror is just too slow to sync up at times. I have even tested the InVision Viewer app with Prototype on my iPhone 4s, and it works buttery smooth too!

Something I feel that is missing, is the ability to view the prototype on your Mac. Currently every prototype you create you need to view with the iOS InVision Viewer app. Also, we can’t share the prototype with a URL like Framer Studio or InVision. But I think the team is already working on these features!

But for now, the prototype you create will be stored on your device, so you can bring the phone around and show the prototype to someone else.

Something to note before you start prototyping is that your Sketch file layers need to be as neat as possible so that you won’t have a hard time finding and selecting the layers to link.

If you don’t have the beta code you can request from the InVision team now, my colleague has requested and they have given her a bunch of beta redemption codes! 😱

What do you think about the Craft Prototype? Is this the killer tool compared to other prototyping tools? Let’s discuss this together!

Hit the 💚 and share if you’ve enjoyed this article. It’ll motivate me to write more too! Thanks!

Follow me on Twitter. If you have a new project you want to collaborate with Minitheory on, you can email or visit us here!

_
Yap Kwang Yik is a UI Designer work at Minitheory, a digital design studio based in sunny Singapore. We make software simple, based on how people think and behave.