Craft Prototype: InVision’s Adobe XD Killer

InVision is about to give us the ability to create prototypes within Sketch that look and feel like a fully coded prototype.

This article is your sneak peek into what’s coming. You’ll never look back.

The Edge of the Future

I’ve used lots of prototyping tools in my career and even though it’s still in beta, InVision’s Craft Prototype plugin for Sketch is easily the greatest combo of intuitive interface and powerful product I’ve ever used.

Like a Tesla with a v8 engine

Page Transitions

Page Transitions are fairly basic and you can do this in most prototyping software products.

Prototype allows you to perform just about any type of transition you can think of, including:

  • On Tap
  • On Tap + Hold (i.e. 3D touch)
  • Swipe Left
  • Swipe Right
  • Swipe Up
  • Swipe Down

As well as animations based on those triggers, such as:

  • Instant
  • Dissolve in
  • Slide in from Right
  • Slide in from Left
  • Slide in from Top
  • Slide in from Bottom

Layers can also be turned into modal overlays and have additional settings as well, but you can look those up. :p

Sticky Header/Footer

Sticky Header and Footer are other features that are fairly standard across the board but Craft Prototype makes it as simple as selecting a group of layers and telling it to be sticky.

Editable Text Fields

Editable Text Fields are a step in the future direction. Most prototyping softwares that have this much power require you to learn a graphical programming language. With Craft Prototype you create and select a line of text, press ‘c’ to activate Prototype, and tell it to be live text.

Beyond creating a text field you can also tell it what keyboard to bring up (i.e. standard, phone number, email, etc.), what placeholder text to display, whether or not you want an easy access ‘clear all text’ button, and many other options.

The software offers multiple default input types that have preset behavior:

  • Single line input
  • Multiline input
  • Password protected
  • Email address

Protected Password Fields

Technically this should be part of the last section, but I just wanted to take a second to appreciate how awesome it is that you can create a password protected field.

Take Pictures

Taking pictures is another incredibly powerful feature generally only offered through graphical programming software or full code.

With a couple clicks you have access to the phone’s camera and are able to take a picture with your prototype. And by naming your layer ‘_photo’ the prototype will use that layer as a mask for your photo.

Access Camera Roll

Not only can you take a picture, you can also grab pictures from the phone’s camera roll. Just like the Take Pictures feature, you need to name your layer ‘_photo’ in order for the photo to be placed appropriately.

Make Phone Call

I’m not sure how often this would be used in a prototype, but it’s pretty awesome that you can use a static layer to create a button that makes calls.

Send iMessage

And beyond calls you can send iMessages too. You can even fill in the text to be sent with your message if you want. Otherwise, leave it blank and just open up a blank, interactive iMessage!

Access Safari

Need to link somewhere from within your app? With a couple clicks you can create native links within your prototype to take people wherever you want.

It’s as easy as selecting a layer, pressing ‘c’ to initiate Prototype, and then dragging the GUI to the Safari browser icon and entering the site you want to direct to.

Embed Web Views

Even cooler than links in your prototype is the ability to embed the site or data into your prototype.

This seems like it’s no big deal, but when have you ever seen a prototype that has a live Google Map inside?

If you’re good with code and want to hack the system to make some really cool micro interactions check out this article by Nikolas Klein on how to hack live code into your prototype!

Try Craft Prototype Today

First you need to get a beta code. You can get one by asking friends that have the beta already or by emailing and politely letting them know you want a code to access Prototype.

After you get your code, setting up Craft Prototype is the hardest part of using it. Luckily InVision has created a walk through for us that makes it a little easier.

Once you get Prototype all set up within Sketch you’ll need to download InVision Viewer app to mirror your prototype on your phone.

Download The Demo

I created a demo prototype that will walk you through all of this step-by-step. Or you could just keep this article open and watch the GIFs as you design your prototype.

I’d download the demo if I were you tho!

Plug it in and click around on your phone for a bit before you break it down and start making something new. I built the prototype to teach you how to build a prototype.

I’ve heard some pretty good reviews from people that have used it, including some of my R/GA teammates in SF, Portland, and NY, as well as a handful of people from Nike. Hopefully it’s just as helpful for you!

Want More?

For a more in-depth documentation of everything you can do with Prototype, check out this article from InVision:

If you get stuck at any point in this process, feel free to reach out! I’ve helped a handful of people set this up so we should be able to get you up and running in no time!

The Future of Prototyping

Craft Prototype is by far the easiest and most powerful way I’ve ever created a prototype. And this it’s still only the beta!

Imagine what it will be as Prototype scales to a wider variety of platforms, starts to integrate with Sketch’s new responsive artboards, and updates to meet its users needs. At that point we’ll be steps away from fully functioning products without having to write a single line of code!

The dream is getting closer and closer with every software update, and there’s no doubt InVision and Sketch are leading the way.

If you liked this article, please share it so other people stumble upon it as well!! You can also sign up for the newsletter and join over 1,400 people who have already done the same!

Or connect with me across the web: Medium // Twitter // LinkedIn

You might also like some of my other articles: