Prototyping in Sketch is officially available now and here is my review! 🎉
Prototype by InVision Craft, out of beta after 1 year of waiting! 👍
🚨 The time when this article publish is about prototyping in Sketch with InVision Craft. It’s not same as the Sketch native Prototyping feature, you can read more about the native prototyping in Sketch official website. 🙏
🙏 Don’t Overlook Prototyping Skill
There are many hot topics in the design space around design tools, design systems recently, and prototyping is one of them! It is one of the necessary skill that designers must have under their belts. Just like my idol Dann Petty said from his recent visit to the Twitter Design team and the takeaway from them:
✨ Out of Beta after >1 year
The team building the prototyping feature in Sketch are the folks from Silver Flows. In March 2016 they were acquired by InVision and started working to integrate the prototype feature into Craft by InVision. Around June 2016, the Prototype feature was available in the beta version of Craft. And now it is finally out of beta! 🎉 No need for any beta code or working on the unstable beta version of Craft anymore! 😭👍
🤔 But, There are Some Changes…
If you had played around with the beta version of Prototype or read my article about the Prototype Beta , you will realise that it is different in the today’s version.
The missing features that were available back in the Beta version:
- Create native text input field: This is my favourite feature, for now not a lot of prototyping tools can achieve this yet. (Example)
- Embed content from Google Maps, YouTube, Vimeo, etc: For me, I think this can be a very useful feature that you can use for instance on your Contact Us screen, or if you are working on video apps. (Example)
- Fixed Headers and Footers: Very useful feature if you have a very long screen and wanted to have fixed headers or fixed bottom navigation for your app prototype. (Example)
- Connect iOS device and interact the prototype: In the beta version, we could connect iPhone or iPad to play with the prototype while prototyping in Sketch, no uploading or syncing process needed.
- Launch Camera app and browsing iOS Photos app: This might not be a major feature, but it is cool to have! (Example here & here)
- Compose an email or SMS
- Make a phone call
That’s a lot of missing features in the official version! 😱 Some people might feel disappointed, but I think there are reasons why the InVision team decided to take away those features in this official launch. And Sketch has evolved into something better over the year, like the latest file format since version 43; maybe the InVision team is holding on to the beta features. (I’m just guessing 😅) And for sure the team won’t be stopping at this version, as always, product is an iteration process.
Now let’s start to play with all the features of Prototype! ✨
Initial Screen
Once you have installed or updated Craft Manager and the Plugin, you will see a thunder icon ⚡️ at the bottom of the Craft panel. Unlike the beta version where the icon is similar to the Craft website and not placed together with the stack of 5 features (Sync, Library, Data, Duplicate, Freehand).
P.S.: Once you have installed Craft Manager, I recommend everyone to tick the “Launch Craft Manager on startup.” So that the manager will prompt you if there are any latest updates you need to install. Craft Manager and the Craft Sketch plugins are 2 different update processes, and sometimes my friends will miss one of them. Below is a walkthrough of the updating process.
Start Prototyping
Open your Sketch file with your design, and then click the Prototype icon ⚡️, you will get this message on how to begin:
Now, select one layer and then press C to start linking it to another artboard with the arrow. Before you click on any artboard, you can zoom in or out to navigate to the artboard you want to link to by using CMD + or CMD -. You can hold spacebar to pan around the same page canvas too, and the arrow will remain there until you select one of the artboards.
Link Artboard
Once you have decided the artboard you want to link and clicked on it, you will see a popup with several options to choose: Link to a screen or Link as Overlay. For gesture options there are: Click and Hover for desktop prototypes; Tap, Double Tap, Swipe Right, Swipe Left, Swipe Up, Swipe Down for mobile prototypes.
You need to give a proper interaction based on either the desktop or mobile project you’re prototyping. For example, there is no Hover interaction in mobile, so remember to skip this option for mobile projects.
There are Transition options if you’ve selected mobile gestures. All the Gesture and Transition options are the same as the InVision website prototyping option. Will go into this later.
Toggle to View Link Arrows
Once you have selected Add Link, you will see a curvy arrow that links the layer to selected artboard. This is new from the beta version where after you add a link, you won’t see anything other than a small indicator in the layer list.
You can toggle on and off with the Prototype ⚡️ icon to view the links. And it is contextual, you can see all the link arrows without selecting any artboard or layer, or you can just see the particular artboard link arrow only. Below is the example:
- When I select the first artboard, it only shows the link arrow to the next artboard.
- When I choose the second artboard, it shows 2 link arrows, 1 coming from the first artboard, and another is going to the third artboard.
- When I select the third artboard, it only shows 1 link arrow that originates from the second artboard.
- When not selecting anything by pressing anywhere on the canvas, it will show all the link arrows across the artboards.
With this new feature, it gives a much clearer view of your prototype flows. You can say it looks the same as how Adobe XD does it. 😅
Anchor Link
This feature is quite a hidden feature in Prototype. Once your press C to create a link, you’re not limited to link to another artboard. You can link within the same artboard you have selected. This will make an anchor link to the position you want. Here I create a Back to Top button to go back up to the top of the screen:
Link Back/Close
Link Back/Close is quite straight forward. It basically links back to the previous screen. Close is for closing an Overlay.
External URL
Unlike the beta version, now the External URL can only link to a website. In the beta version, there is an option to embed Google Maps, YouTube, Vimeo links into the prototype. I think this is because the current InVision prototype website cannot achieve this feature yet.
Editing Link
Editing a link is easy, you just need to click on the link arrow dot and change the parameters or remove the link. But you cannot modify the link pointer to point to another artboard. You need to remove the link and then create a new link again to link to the artboard you want, for now.
Sync Prototype Hotspots to InVision
All the links (hotspots) you have made with Craft Prototype ⚡️ in Sketch can be synced into an InVision project by using the Craft Sync feature. This makes the prototyping workflow much faster compared to making the hotspots inside an InVision project.
I had an awful experience making the InVision prototype with a slow connection when I’m onsite at my client’s place, loading a screen and making the hotspot within the browser is a pain. 😭 So make sure your connection is fast!
Once you have synced your Sketch screens to your InVision project with hotspots, you can test all the links/hotspots with the InVision project.
But there is a limitation in making hotspots with Craft Prototype, the link/hotspot can only be edited in Sketch. You cannot edit or remove the link/hotspot inside an InVision project.
And if you have created hotspots in an InVision project, it won’t magically sync to your Sketch Prototype. Currently, there is no way to hotspots both ways, but let’s hope in the future this can happen magically~ ✨
As the above screenshot, the yellow colored hotspot was created in Sketch with Craft Prototype, where you will get the message “This hotspot can only be edited using Craft Prototype” if you click on it. The blue colored hotspot is created with the InVision project in the browser, where there is no way to sync it into a Sketch file, for now.
Pros and Cons
✅ Fast and stable
✅ Designing and prototyping in the same app - Sketch
✅ Bird’s eye view of your prototype links
✅ No need internet connection when prototyping
✅ Very useful if you’re a heavy user of InVision
❌ Missing 7 features that were available in the beta version
❌ No way to interact with the prototype unless you sync to InVision project
❌ Can’t mirror prototype to iOS or mobile devices
🤔 Can Craft Prototype Improve Our Workflow?
At Minitheory, we’re using InVision for most of our client work when collaborating between designers, managing client’s feedback, prototyping, dev notes and Inspect for our front-end developers. It is an important part of our design workflow, and I’m sure the new Craft Prototype will definitely improve our productivity at Minitheory. ⚛️
Is it suitable for you? It depends. Just like I mentioned, if you are a heavy user of InVision, whether for yourself or in your organization, Craft Prototype will help your workflow. But there are many prototyping tools out there, and they might be more advanced compared to Craft Prototype. I’ll suggest you choose the tool that will seamlessly fit into your workflow so that you and your designers, developers can collaborate faster! ⚡️
I’m hoping the InVision team will keep innovating with Craft to bring better features soon that fit into the Sketch ecosystem! 🙏 But for now, there is no harm to give it a try and let’s discuss together! 😄
Hit the 💚 and share if you’ve enjoyed this article. It’ll motivate me to write more! Thanks!
Follow me on Twitter. If you have a new project you want to collaborate with Minitheory on, you can email or visit us here!
_
Yap Kwang Yik is a Senior UI Designer work at Minitheory, a digital design studio based in sunny Singapore. We make software simple, based on how people think and behave.
