[Download the corresponding Sketch project file here.]
So you’ve got your beautiful screens designed in Sketch and you’re ready to throw together an initial prototype. In the past, we would sync to InVision, open our browser, and head to Build Mode—but the future is now.
Using Craft, we can now prototype for desktop and mobile directly within Sketch and sync the finished result to InVision to test, share, and collaborate.
Let’s take a look at the crazy amount of work we can get done in just a couple of quick minutes.
For those who prefer reading to watching, get the step by step below.
1. Install Craft
First things first: In order to use Craft, you’ve gotta get it installed on your computer if you haven’t already. Head to invisionapp.com/craft to download and install Craft.
If you’ve already got an older version of Craft installed, open Craft Manager and click Update to be sure that you’re on the latest version.
Related: 30 free Sketch plugins to grab right now
2. Start connecting
Now that you’re all set up with the latest version of Craft, you’ll find the Craft toolbar nestled alongside the Inspector on the right-hand side of Sketch. At the very bottom of the toolbar you’ll find a new lightning bolt icon to toggle in and out of prototyping mode. You can also use X on the keyboard to toggle quickly. This will be helpful when you have a lot of connection lines on the screen and want to hide them and get back to designing.
Speaking of connection lines, let’s make some.
Transitioning screens
Linking a layer to an artboard is easy and fast. I mean really fast. Just select a layer, press C on the keyboard, and click the artboard to link to. That’s it!
You’ll be presented with a dialogue box where you can make decisions about what kind of gesture triggers the link and which transition you’d like to use to animate from the start artboard to the end artboard. Since this is a mobile prototype, we can change click to tap, and use a snazzy Push Left transition.
Pro tip: Copying and pasting a layer brings the the link with it. This can be really helpful for elements on several artboards that all need to link to the same place.
Position on screen
In addition to being able to link a layer to another artboard, you can also link a layer to another position on the same artboard. You can then enable a Smooth scrolling transition which will slide user down when the link is triggered.
Pro tip: You can make an artboard as long as you want. InVision knows to make it scrollable and starts you at the top just like you’d expect.
Screen as overlay
One huge way to save yourself from breaking your backing adding global menus and modals to your prototype is to use Overlays. First you’ll need to get your overlay on to its own artboard with its own boundaries. In my case I have a side menu on its own artboard that’s only the width of the menu itself. Next we can just link the menu icon to the menu artboard and switch Link to a Screen to Link as Overlay.
This will open up some options for how you want to position and display the overlay. Since this is a side menu, we’ll change the Position to Top Left and the Transition to Slide in Left. I’ll leave the rest of the options at their defaults.
Link back/close
One of the default option for our side menu overlay allows the user to click away to close the menu. But we’ve also got this sweet close button that could come in handy. If we select the close button and press C, we can link to a button that appears at the top of the canvas called Link Back/Close. Being that this is an overlay, this action will trigger the overlay to close.
Pro tip: You can also harness the power of the entire interweb by linking to an external URL from this little toolbar.
3. Sync to InVision
Once you’ve got all of your links established, you’re ready to sync your prototype to InVision. Open the Sync tab on the Craft toolbar and sign in to your InVision account if you haven’t already. At this point you can choose to sync to an existing prototype or create a new one.
Let’s create a new prototype and give it a name. Be sure to switch the type from Desktop to iPhone and then choose Create Prototype.
Once your prototype has completely finished syncing, you can open it directly from the sync tab and start interacting with it. Just like that, our prototype is ready to view, share, comment, and inspect.
Pro tip: Download the InVision mobile app on your iPhone or iPad device to test your prototypes with the look and feel of a native app.
More Sketch tutorials
Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.
