×

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

Click the Prototype icon (Image_2018-08-06_at_12.34.37_PM.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.

 

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.

  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

craft-prototype-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/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.

Previewing Your Prototype in Sketch

Now that you’ve created an interactive prototype, you’re ready to see it in action. Preview your prototype—without leaving Sketch—with the Craft Prototyping Local Preview feature.

To preview your prototype in Sketch:

  1. Select an artboard that contains hotspots you added with the Craft Prototype plugin.
  2. Right above the Prototype plugin icon (SCREENSHOT), to the lower-right corner of the Sketch canvas, click the Local Preview icon (SCREENSHOT).
  3. In the preview modal, click, scroll, and interact with the prototype as needed.

Local Preview Tools and User Interface

At the top of the preview modal, you’ll find the three primary tools used when previewing prototypes:

  • Back button: The back button (SCREENSHOT) takes you to the previous screen in your prototype. This is especially useful if a given screen does not include a hotspot that takes you to the previous screen.
  • Preview skin arrow: This drop-down arrow (SCREENSHOT) reveals an extensive list of all available device types and layout options you can select as your Preview skin.
    Note: You can also click the currently selected device type and layout to reveal the list of other options.
  • Sync icon: Click the Sync icon (SCREENSHOT) to open the Craft Manager modal and publish your prototype to InVision.

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.