Craft Prototype brings prototyping directly into Sketch. It gives you the ability to construct an interactive prototype directly in Sketch with real-time mirroring to your mobile device.

GETTING STARTED WITH CRAFT PROTOTYPE

To configure your prototype with the new Craft plugin, you’ll start by linking layers to components. If an artboard with layers has not already been created in Sketch, you’ll need to create one—otherwise, the next step is to start constructing your prototype.

LINKING LAYERS TO COMPONENTS

To start linking, select the layer you want to link to a component, then open the Craft Prototype panel and select the relevant component.

Alternatively, you can select a layer and then press the ‘c’ key on your keyboard to bring up a quick link panel to make it easy to link layers as you go along:

COMPONENTS

Input Fields

The Input Field is only available for text layers and allows you to define interactive text fields in which users of your prototype can actually enter text as if it were a real iOS app.

The following settings are available for an Input Field:

Type

This defines the text field behavior that will display. Your options are:

  • Single Line
  • Multiline
  • Password
  • Email Address

Note: Multiline adds a secondary setting which allows you to choose the number of lines that can be visibly seen when adding text in an interactive prototype.

Initial Text

This allows you to display text in the field which will need to be manually deleted before typing your response.

Placeholder

The placeholder displays text that instructs the user on what to enter. The text disappears when a user clicks into the field.

Shows Clear Button

This setting controls visibility of the option to clear input field (the small “x” that appears to the far right of a line that clears the field).

Return Key Action

This determines what happens when the return key is pressed on the user’s keyboard.

Advanced Settings

You can also set advanced settings by clicking Advanced at the bottom left of the Input Field modal.

Advanced settings include:

Auto-complete: This turns on the auto-completion of words using the native iOS feature.

Check Spelling: This enables spell check for words entered in the field. If a word is mispelled, you’ll see the red line underneath the misspelled word.

Keypad: This allows you to choose the type of iOS keyboard to display and gives you the option of adding convenience for your user.

  • Simple Text, Punctuation, Email, Web URL
  • Number Pad, Decimal Pad
  • Phone Pad, Name and Phone Pad
  • Twitter, Search

Return Key: The is allows you to customize the text to display on the return key in the iOS keyboard. For example, “Route” may be handy if you’re working with navigation.

  • Default, Go, Next, Done, Send
  • Join, Route
  • Search, Google, Yahoo
  • Emergency Call

Activate only if text is entered: With this option, the return key will be greyed out if no text is entered.

Accessory Layer: This is a layer that gets attached to the top of the keypad when you’re typing into the input field. A common example of this would be the message composer in a messaging app.

Links

When you click into the Link Details modal, you’ll see available gestures and behaviors. The gesture you set will determine how to activate a function, and the behavior is what follows the function.

Available Gestures

You can choose between the following gestures for your links:

  • Single/Double Tap
  • Tap and Hold
  • Swipe Left
  • Swipe Right
  • Swipe Up
  • Swipe Down

Available Behaviors

Available behaviors for links include the list below, and we’ll break out each behavior in detail.

  • Link to an Artboard
  • Link Back
  • Dismiss a Modal
  • Dismiss Keyboard
  • Launch Camera
  • Browse Photos
  • Link to a Website
  • Compose an Email
  • Compose SMS
  • Call a Phone
Link To An Artboard

You can select which artboard to link to, and also choose how to segue to that artboard (push, modal, or swap).

For segues, the default setting will be Push, which adds the destination screen to the navigation stack and slides it in from right to left. A Modal segue is used to initiate a self-contained task that must either be completed or explicitly abandoned. If you change the setting to Modal, you’ll then be able to select how you want it to animate in and out (from bottom, top, left, instant, dissolve, etc).  A Swap segue will change the current screen to the destination screen without affecting the navigation stack.

Next, you have a handful of animations that you can apply. Animate in is the effect to use when initially displaying the modal. Animate out is used for when closing the modal. Both of these options include From the Bottom, Top, Left, Right, Instant and Dissolve. You also have an option called Interactive Out which is the gesture you can set to close the modal.

You can also set the Distractor, which is the backdrop that will display behind the modal.

Link Back

Returns you to the previous screen you were viewing if you were brought to the current screen via a link. If you weren’t brought to the current screen via a link (e.g. you’ve just started viewing the prototype and this is the initial screen displayed) then a message will appear explaining that you can’t be taken further back.

Dismiss A Modal

When you choose to dismiss a modal for your link behavior, you can use the Then go to Artboard dropdown to specify which artboard to transition to when modal is dismissed.

Dismiss Keyboard

If the iOS keyboard is being displayed (e.g. you’re editing an input field) tapping this layer will dismiss the keyboard.

Launch Camera

When you select Launch Camera, you’ll be able to make the following additional specifications:

  • Capture Using: Choose the front or rear camera on the device
  • Allow editing photo: Allow for cropping and other edits in iOS
  • Then go to: Specify an artboard to display after an image is captured

Pro Tip: With Launch Camera, you can actually include the image you take from your camera in your mock up!

Browse Photos

When you select Browse Photos, you can use the Then go to: dropdown to specify an artboard to display after an image is captured.

Just like with the Browse Photos behavior, you can also actually include the image you take from your camera in your mock up!

Link To A Website

In the “Website Link” field, enter the destination URL. That link will be launched in the default browser on the preview device.

Compose An Email

In the Compose an Email modal, you’ll need to enter the email address of the recipient, the subject of the email, and the body of the email. This information will be prefilled in the email compose screen in your prototype, like a draft.

Compose Sms

In the Compose SMS modal, you’ll need to enter the phone number of the SMS recipient, as well as the body of the SMS. This information will be prefilled in the Message screen in your prototype. You can also leave it empty for a blank SMS screen.

Call A Phone

In the Call a Phone modal, you’ll need to enter the phone number of the desired phone call recipient, and a checkbox allows you to ask for confirmation or a prompt before dialing the call.

Fixed Headers And Footers

Going back to the components available, we have Fixed Headers and Footers. Using these will define a shape as fixed, just like the fixed headers and footers available in InVision prototypes.

An example of a layer you might want to fix would be a submission button that floats at the bottom of the device’s screen.

To set a fixed header or footer, select your shape, open the Craft Prototype panel, then select Header or Footer.

Web Views

Web Views allows you to confine the launch of a site to the space of a shape layer. In the settings, you can input a field for a site URL with an option to allow the web view to be scrollable. You also have an option for embedding content such as Google Maps, YouTube, or Vimeo.

For example, to embed a Google Map in a web view, click the Share icon on a map, select the Embed map tab, then copy the code and paste it into the Web View editor.

 

You can also check out this article on Medium which has helpful information on incorporating web views.

PROTOTYPE PANE

The Prototype Pane will change based on what you’ve clicked on (layer vs. artboard). If you’ve clicked on an artboard, the pane will display settings that allow you to configure the appearance of certain elements.

Clicking On An Artboard

When you click on an artboard in Sketch, the Prototype Pane will show the following settings:

Status Bar

Changing Status Bar allows you to set the text color of the iOS status bar when viewing the prototype.

Scroll Indicators And Scroll Direction

The Scroll Indicators setting allows you to set the color of the scroll bars in iOS (none, black, or white), The Scroll Direction setting controls how the artboard scrolls; you can choose between disabled, vertical, horizontal, or both directions. Bounce determines whether elastic scrolling is enabled. If you uncheck Bounce, when you get to the bottom of a scrollable screen, the user will experience a hard stop.

Clear Components In Artboard

Selecting Clear components in Artboard removes all of the Craft Prototype components configured from that selected artboard.

Clicking On A Layer

Clicking on a layer displays components associated with the layer, along with an “Edit” button to allow for easy editing, and a “Remove” button for removing components.

VIEWING AND MIRRORING PROTOTYPE

Viewing Prototype

When you’re ready to view your prototype in the InVision iOS app, you’ll need to first connect your device by following these instructions:

  1. Connect iPhone to Mac with USB cable or connect to the same WiFi network on both devices.
  2. Open the InVision iOS app.
  3. Click the Prototype pane in Sketch.
  4. Click No Connected Devices and select your device to connect.
  5. In the InVision iOS app, tap the name of the prototype to begin previewing.

SETTINGS COGWHEEL

When you click on the Settings cogwheel, the first input field is the name of your Sketch page and the second drop down menu allows you to choose where the prototype starts.

FREQUENTLY ASKED QUESTIONS

Can I import Craft Prototypes as InVision prototypes or vice versa?

At this time, it isn’t possible to import a prototype built via Craft Prototype into InVision and have the interactions remain. You can upload the artboards as screens using our existing Sketch support, but you would then need to rebuild all hotspots and interactions.