×

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.

Prototype Beta Users: Prototype is no longer a separate method of prototyping from InVision and has been discontinued. The prototype channel in Craft Manager will remain open for now, but we highly recommend updating to this release, as we will no longer support the beta version.   

 

 
 

 

Getting Started

To use Prototype, install or update Craft and log into Craft Sync.

Once logged 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 Create a new prototype within the Craft Sync panel.

Enter the new prototype name - you cannot use the name of a pre-existing prototype for a new prototype. Select the device type and which account you’d like it under.

Sync-Create-a-new-prototype.png         Pasted_image_at_2017_05_12_11_06_AM__2_.png 

Prototype Mode

Click the Prototype icon (Screen_Shot_2017-05-12_at_8.32.28_AM.png at the bottom of the Craft panel) 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.

To disable prototype mode, go to the Craft menu, Sync, then Disable Prototype. This will disable the hotkeys, the ability to toggle Prototype mode on, and the option to include hotspots when syncing with Craft Sync.

Pasted_image_at_2017_05_17_05_47_PM.png

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

  1. Select the gesture on which you want your Overlay to appear. 
  1. Set the Position from the list. Overlays that need custom positioning should be added directly in InVision after syncing your artboards.
  2. Select a Transition type to animate your overlay, or use Instant for no animation.
  3. 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.
  4. Change additional options, as desired.

Screen_Shot_2017-05-12_at_8.00.35_AM.png

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

Kapture_2017-05-17_at_10.39.48.gif

  1. Choose the originating layer and press C.
  2. Click on External URL positioned at the top of your canvas to set the destination to an external web page when clicked. Note: The URL must have http:// or https:// in order for the hotspot to function.
  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/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/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.

Syncing to InVision

  1. Open the Craft Sync panel.
  2. Choose whether you’d like to sync all artboards on an active page or only selected artboards, and click Sync to InVision.
  3. Click Open to view your prototype in InVision to share your designs.

Note: 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.

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.