InVisionis preparing to provide the opportunity to create Sketch prototypes, indistinguishable from the prototype-based code. Talk about future innovations. During my career I have used many tools for prototyping, but the Prototype Craft plugin for Sketch from Invision — the best combination of rich features and intuitive interface Ive seen, although its still only a beta version. The opportunity to move between pages is most tools for prototyping.
Craft Prototype allows you to use any types of transitions that can come to mind, for example: In addition, you can use associated with these transitions animations. Layers can also be converted to overlays and control them with the help of individual additional settings.
Fixed header and footer — another fairly standard option, but the Prototype Craft makes their use extremely simple. Only need to select a group of layers and lock them.
In most of the prototyping tools to create such a field, youll need to know the tools of visual programming. Using Craft Prototype, you can simply create a line of text, press C to activate the Prototype and convert a string into live text. You can specify what type of keyboard to use (standard, enter the telephone number, enter the e-mail and so on), some text tooltip to display, whether to use the button “remove all text” and more.
The tool offers different input types with the specified behavior. Technically, this item had to be in the previous section, but I want to admire how cool is that. You can create fields with password protection.
Typically, the function of photography is available only with the tools of visual programming, or is implemented through code. In just a few clicks you get access to the phones camera and can take pictures in the prototype.
If you call layer _photo, the prototype will use it as a mask for your photo. You can not only take pictures but also to select a picture from your phones gallery. As with photography, add the layer name _photo photo displayed on the page properly.
Dont know how often this feature will be used in the prototypes, but its cool that of the static layer can be made of the button by clicking on which will make the real call.
In addition to calls, you can send iMessage. You can even pre-populate the message text. Or leave it blank, use an interactive interface iMessage.
In just a few clicks you can create a prototype native links. Only need to select a layer, press C to launch the Prototype, drag the widget to icon Safari and enter the address of the website which will be a redirect. Cooler links in the prototype — only the possibility to incorporate into it the website or data. It would seem, is not so much, but think.
Did you happen to see a prototype with embedded Google Maps?. If you are not afraid of code and want to hack the system by inserting some great micro-interactions, see Nicholas Klein on how to insert the code in your prototype. First you will need the code beta.
You can get it from friends who already use the beta version, or write a polite letter to [email protected] asking to send code to access the Prototype. After you get the code, will begin the most difficult part — setting Craft Prototype. Fortunately, the InVision team has written a manual, which slightly simplifies the task. After installing the Prototype in Sketch need to download the InVision Viewer app to create a mirror of the prototype on your phone.
I created a demo prototype, which will guide you through the use of the Prototype step by step. You can just leave this article open and look at the GIF during the creation of the prototype, but in your place I would have still downloaded the demo. Install it and see how it works before you create something new.
I got pretty good reviews from people who they have used, including colleagues at R/GA, San Francisco, Portland and new York, as well as some of the guys from Nike. I hope it will be useful to you! More detailed documentation about the possibilities offered by the Prototype, can be found in this article from InVision. If at any stage you have any difficulty, do not hesitate and write.
The Prototype Craft is the easiest and powerful tool that I only used for prototyping, and it is only a beta version. Imagine what will happen when he will extend the capabilities to multiple platforms, will be integrated with adaptive crop vector Sketch and will be updated regularly. We are steps away from being able to create applications without writing a single line of code.