Important links

Related articles

Prototype

With Craft Prototype, you can build interactive prototypes right within Sketch. Once you’ve created an interactive experience, use Craft Sync to publish your designs straight to InVision Cloud—where you can start sharing your ideas and capture feedback within minutes.

Getting Started

Once signed in, you can start syncing your screens and hotspots to your InVision prototype(s). Select which prototype you’d like to sync your screens to by choosing your prototype from the list. Use the search field to find it by name, or create a new prototype. Learn more about using Craft Sync here.

Create a new prototype

To sync screens to a new prototype:

Click the Craft Sync icon ().

In the module that appears, click inside the text box and choose Create prototype.

Enter a new prototype name (you cannot use the name of a pre-existing prototype for a new prototype).

Select the device type.

Click Publish.

Prototype mode

At the bottom of the Craft panel, click the Prototype icon (), or press X at any time to switch to prototype mode. In prototype mode, you will see all created hotspots appear by default. Clicking on a layer while in prototype mode will only show the hotspots tied to that artboard. You can exit prototype mode by pressing X again or clicking the prototype icon.

Creating Links

To create links to other artboards in your InVision prototype:

Select an artboard layer or group and press the C key.

Move your cursor to the new artboard you’d like the hotspot to trigger.

Select the link type, artboard, and gesture.

If you want, check the box Maintain scroll position after click.

Click Add Link.

You should now notice an arrow going from your originating artboard to the destination artboard.

Here are the available gestures:

Desktop

Click

Hover

Mobile

Tap

Double tap

Swipe right

Swipe left

Swipe up

Swipe down

There are 5 ways to link layers and screens together:

Link to a screen or artboard

Link as overlay

Link to a position on the screen

Link to an external URL

Link back/close

Link to a screen or artboard

When creating a link, the default setting is Link to a screen. To do so:

Select the originating layer or group and press C.

Click the destination artboard.

If the destination artboard is on a separate page, navigate to the top of the canvas and click Artboard.

Previewing your prototype with Craft Player

Now that you've created an interactive prototype, you're ready to see it in action.

To preview your prototype in Sketch:

Click the Craft Player icon ().

In the Player modal, click, scroll, and interact with the prototype as needed.

To navigate screens without using a hotspot, press the left and right directional arrows on your keyboard.

Craft Player User Interface

At the top of the Player, you'll find three items:

Artboard dropdown list: Click the dropdown list to change the artboard currently shown in the Player.

Settings: Click the Settings icon () to reveal an extensive list of all available device types you can select as your viewport size for the Player.

When you first open the Player, the viewport size is assigned automatically, based on your artboard sizes.

Sync icon: Click the Sync icon () to open the Craft Manager modal and publish your prototype to InVision.

Craft Player viewport sizes

You will find the following device types available as viewport sizes for the Player:

Phone

iPhone XS Max

iPhone XS

iPhone XR

iPhone 8 Plus

iPhone 8

iPhone SE

Galaxy S8

Galaxy S7

Tablet

iPad Pro

iPad

Nexus 10

Nexus 7

Watch

Apple Watch Series 4 44mm

Apple Watch Series 4 40mm

Apple Watch Series 3 42mm

Apple Watch Series 3 38mm

Android Watch Square

Android Watch Round

Desktop

Apple TV

15" MacBook Pro

Desktop HD - Desktop

Layout options & other settings

The additional settings for Craft Player differ slightly based on the device type you have selected:

Rotate to Landscape: Available for phone or tablet device types only, click this option to preview the prototype in landscape layout. Or use the keyboard shortcut (Shift + Command + R) to rotate between landscape and portrait.

If in landscape layout, you’ll notice this option in the Settings menu says Rotate to Portrait instead.

Reset Scale: Click this option (or use the keyboard shortcut Control + Option + K) to reset the scale of the Player.

Reset Device: Click this option (or use the keyboard shortcut Control + Option + D) to reset the device type based on the size of your artboards.

Syncing to InVision

Select the artboard/s you want to publish.Tip: To publish all artboards on the Sketch page, ensure that you have no artboards selected before proceeding to step 2.

In the tools panel on the right side of the workspace, click the Craft Sync icon (), which will prompt the Craft Manager dialog to open.

In the Craft Manager dialog, click the Select or create a prototype field, enter a name to select the prototype you want or click the Create prototype button, and select the device type from the drop-down list.

If you’re creating a new prototype, click the blue Publish button. If you’re syncing changes to a previously created prototype, click the blue Update button.

You will then see the Prototypes tab, where you can view the publishing progress indicator.

Hotspots created in InVision cannot currently be synced back to Sketch. Any hotspots created in Prototype and synced with InVision in the same location on an artboard will create overlapping hotspots. Remove the original hotspot in InVision to continue syncing links with Prototype.