Design

Build an interactive prototype in Sketch in minutes

by

on

View all posts

[Download the corresponding Sketch project file here.]

So you’ve got your beautiful screens designed in Sketch and you’re ready to throw together an initial prototype. In the past, we would sync to InVision, open our browser, and head to Build Mode—but the future is now.

Using Craft, we can now prototype for desktop and mobile directly within Sketch and sync the finished result to InVision to test, share, and collaborate.

Let’s take a look at the crazy amount of work we can get done in just a couple of quick minutes.

For those who prefer reading to watching, get the step by step below.

1. Install Craft

Install Craft

First things first: In order to use Craft, you’ve gotta get it installed on your computer if you haven’t already. Head to invisionapp.com/craft to download and install Craft.

Sketch prototype

If you’ve already got an older version of Craft installed, open Craft Manager and click Update to be sure that you’re on the latest version.

Related: 30 free Sketch plugins to grab right now

2. Start connecting

Sketch prototype

Now that you’re all set up with the latest version of Craft, you’ll find the Craft toolbar nestled alongside the Inspector on the right-hand side of Sketch. At the very bottom of the toolbar you’ll find a new lightning bolt icon to toggle in and out of prototyping mode. You can also use X on the keyboard to toggle quickly. This will be helpful when you have a lot of connection lines on the screen and want to hide them and get back to designing.

Speaking of connection lines, let’s make some.

Transitioning screens

Sketch prototype

Linking a layer to an artboard is easy and fast. I mean really fast. Just select a layer, press C on the keyboard, and click the artboard to link to. That’s it!

Sketch prototype

You’ll be presented with a dialogue box where you can make decisions about what kind of gesture triggers the link and which transition you’d like to use to animate from the start artboard to the end artboard. Since this is a mobile prototype, we can change click to tap, and use a snazzy Push Left transition.

Pro tip: Copying and pasting a layer brings the the link with it. This can be really helpful for elements on several artboards that all need to link to the same place.

Position on screen

Sketch prototype

In addition to being able to link a layer to another artboard, you can also link a layer to another position on the same artboard. You can then enable a Smooth scrolling transition which will slide user down when the link is triggered.

Pro tip: You can make an artboard as long as you want. InVision knows to make it scrollable and starts you at the top just like you’d expect.

Screen as overlay

Sketch prototype

One huge way to save yourself from breaking your backing adding global menus and modals to your prototype is to use Overlays. First you’ll need to get your overlay on to its own artboard with its own boundaries. In my case I have a side menu on its own artboard that’s only the width of the menu itself. Next we can just link the menu icon to the menu artboard and switch Link to a Screen to Link as Overlay.

Sketch prototype

This will open up some options for how you want to position and display the overlay. Since this is a side menu, we’ll change the Position to Top Left and the Transition to Slide in Left. I’ll leave the rest of the options at their defaults.

Link back/close

Sketch prototype

One of the default option for our side menu overlay allows the user to click away to close the menu. But we’ve also got this sweet close button that could come in handy. If we select the close button and press C, we can link to a button that appears at the top of the canvas called Link Back/Close. Being that this is an overlay, this action will trigger the overlay to close.

Pro tip: You can also harness the power of the entire interweb by linking to an external URL from this little toolbar.

3. Sync to InVision

Sketch prototype

Once you’ve got all of your links established, you’re ready to sync your prototype to InVision. Open the Sync tab on the Craft toolbar and sign in to your InVision account if you haven’t already. At this point you can choose to sync to an existing prototype or create a new one.

Let’s create a new prototype and give it a name. Be sure to switch the type from Desktop to iPhone and then choose Create Prototype.

Sketch prototype

Once your prototype has completely finished syncing, you can open it directly from the sync tab and start interacting with it. Just like that, our prototype is ready to view, share, comment, and inspect.

Pro tip: Download the InVision mobile app on your iPhone or iPad device to test your prototypes with the look and feel of a native app.

switch-to-sketch

More Sketch tutorials

Author

Joseph Angelo Todaro

Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.