×

Prototype

With Craft Prototype, you can build and sync interactive prototypes in Sketch via Craft Sync. Once you’ve created an interactive experience, you can sync your designs straight to InVision in a click to start sharing your ideas and capture feedback within minutes.

Getting Started

To use Prototype, install or update Craft and sign in to Craft Sync.

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:

  1. Click the Craft Sync icon (Image_2018-08-06_at_12.31.16_PM.png).
  2. In the module that appears, click inside the text box and choose Create prototype.
  3. Enter a new prototype name (you cannot use the name of a pre-existing prototype for a new prototype).
  4. Select the device type.
  5. Click Publish.

Prototype mode

At the bottom of the Craft panel, click the Prototype icon (Image_2018-08-06_at_12.34.37_PM.png), 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 any time by pressing X again or clicking the prototype icon.

Creating Links

Kapture_2017-05-12_at_8.52.44.gif

To create links to other artboards in your InVision prototype:

  1. Select an artboard layer or group and press the C key.
  2. Move your cursor to the new artboard you’d like the hotspot to trigger.
  3. Select the link type, gesture, and other settings in the window that appears, and click Add Link.
  4. A visual representation of the link appears - a circle at the originating layer or group, and an arrow guiding you to the destination artboard. 

The available gestures are:

Desktop

  • Click
  • Hover 

Mobile

  • Tap
  • Double tap
  • Swipe right
  • Swipe left
  • Swipe up
  • Swipe down 

Link types

There are 5 ways to link layers and screens together which mirror the hotspot options in InVision.

  1. Link to a screen
  2. Link as overlay
  3. Link to a position on the screen
  4. Link to an external URL
  5. Link back/close 

Link to a screen

Screen_Shot_2017-05-12_at_3.33.18_PM.png

Linking to a screen guides the reviewer to a new screen, which is the default setting when creating a link.

  1. Choose the originating layer or group and press C.
  2. Choose a destination artboard, gesture type, transition, and click Add Link.

Link as overlay

Screen_Shot_2017-05-12_at_3.32.27_PM.png

Overlays let you link to another screen as an overlay rather than a separate screen. Learn more about overlays and how to use them here

  1. Choose the originating layer or group and press C.
  2. Click inside the destination artboard to bring up the link modal.
  3. Select Link as Overlay from the first drop down menu.

    If you’d like your Overlay to appear on Hover (desktop only), also decide whether you would like to “Stay on target screen” when your Overlay opens. If you select this option (ON), your Overlay will stay open until you click outside of the Overlay, and/or on a “Link Back / Close” hotspot set on your overlay screen. If you leave this option un-checked (OFF), your Overlay will disappear once your mouse moves off of the hotspot – so be sure the layer your build your hotspot on is large enough to cover the intended mouseover or tap area.

    Note: When the “Stay on target screen” option is off, hotspots within a hover overlay won’t be interactive.

  4. Select the gesture on which you want your Overlay to appear. 
  5. Set the Position from the list. Overlays that need custom positioning should be added directly in InVision after syncing your artboards.
  6. Select a Transition type to animate your overlay, or use Instant for no animation.
  7. Change the BG setting to increase the opacity of your background layer. The color of this background layer pulls from the background color set on the target screen for your overlay.
  8. Change additional options, as desired.
    • Reverse transition on Close link: If selected, your Transition will animate on both open and close of the Overlay.
    • Close on clicking outside of overlay: If selected, a click outside of your Overlay will to return to the originating screen.
    • Fix position of overlay: If selected, your Overlay will not scroll along with the rest of the page.
  9. Click Add Link to save.

Position on screen

Screen_Shot_2017-05-12_at_7.27.24_AM.png

  1. Choose the originating layer or group and press C.
  2. Hover over the same artboard to display a horizontal line. This represents the position on the screen the user is taken to after clicking the hotspot. 
  3. Click the position to save, set a smooth scrolling transition if desired, and Add Link.

 Note: You can currently only link to a position on the same artboard.

External link

craft-prototype-create-external-link.gif

  1. Choose the originating layer and press C.
  2. At the top of your canvas, click External URL and enter the destination of an external web page.
    Note: For the hotspot to function, the URL must begin with http:// or https://.
  3. Check the Open in new window box if you’d like to open the link in a new browser window when clicked. Select Add Link to save.

Link back or close

Kapture_2017-05-12_at_9.52.35.gif

  1. Choose the originating layer or group and press C.
  2. Click on Link Back/Close positioned at the top of your canvas to set the destination to an external web page when clicked.
  3. Select Add Link to set the destination to the previous screen the reviewer was on.

Editing or removing a link

Kapture_2017-05-12_at_15.46.34.gif

To edit a Link:

  1. Click the link’s circle in the originating screen while in Prototype mode.
  2. Make changes to the gesture or transition in the drop down menu and click Save

To delete a link:

  1. Click the link’s circle in the originating screen while in Prototype mode.
  2. Click Remove at the bottom left of the hotspot settings window.

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:

  1. Click the Craft Player icon (craft-player-icon.png).
  2. In the Player modal, click, scroll, and interact with the prototype as needed.
    Note: To navigate screens without using a hotspot, press the left and right directional arrows on your keyboard.

Craft Player User Interface

craft-player-UI.gif

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 (craft-player-settings-icon.png) to reveal an extensive list of all available device types you can select as your viewport size for the Player.
    Note: When you first open the Player, the viewport size is assigned automatically, based on your artboard sizes.
  • Sync icon: Click the Sync icon (craft-player-sync-icon.png) 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 AND 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.
    Note: 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.
  • Reload Sketch File: Click this option (or use the keyboard shortcut Command + R) to refresh the Player.

Syncing to InVision

To sync your prototype to InVision:

  1. 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.
  2. In the plugins panel on the right side of the workspace, click the Craft Sync plugin icon (craft-sync-icon.png), which will prompt the Craft Manager dialog to open.
  3. 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.
  4. 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.
    Note: 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.

Note: Please be aware that any artboards you link or transitions you create with Sketch's built-in Prototyping feature will not appear in InVision. To learn more, check out this article: Why aren’t my Sketch Prototyping changes getting synced to InVision?

Sharing your prototype

Once you’ve synced your hotspots and artboards with Craft Sync, open the prototype in InVision and add collaborators or create a public share link.

 

Getting Started: Craft by InVision LABS (
)

Prototype

Prev