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 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:
- 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 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.
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.
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!
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?
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 email@example.com 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.
We occasionally may release public beta versions of Craft to a pre-selected audience of testers. To participate in a…support.invisionapp.com
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!
Sketch App Sources is the largest collection of icons, UI kits, wireframes, and free design resources for Sketch.www.sketchappsources.com
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!
For a more in-depth documentation of everything you can do with Prototype, check out this article from InVision:
Sean Kinney Craft Prototype is currently in limited beta. Access is only available to select participants. If you’ve…support.invisionapp.com
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 ❤️ it so other people stumble upon it as well!
You might also like some of my other articles:
Wish your design could be as modular as your code? Click through to find out how to make it happen!medium.com
Many parts of applications are rarely experienced, yet we have to consider how the presence or absence of these states…medium.com
The first question out of everyone’s mouth when we meet: Q: What do you do for work? A: I’m an Experience Designer. Q…uxdesign.cc