medium bookmark / Raindrop.io |
Background from Unsplash
There are many hot topics like design tools, design system surrounding us recently, prototyping is one of the hot topics too! It is one of the necessary skill and knowledge that designer must have under their belts. Just like my idol Dann Petty said from recently visited Twitter Design team and the takeaway from them:
The original team building the prototyping feature in Sketch is Silver Flows. In March 2016 they were acquired by InVision and then start working to integrate the prototype feature into Craft by InVision. Around June 2016, the Prototype feature is available in the beta version of Craft. And now it is finally out of beta! 🎉 No need any beta code or working on the unstable beta version of Craft anymore! 😭👍
If you have play around with the beta version of Prototype or read my article about the Prototype Beta (below), you will realize that it is different in the today version.
Those missing features that available back in Beta version:
That’s many missing features in the official version! 😱 Some people might feel disappointed, but I think there are reasons why InVision team decided to take away those features in this official launch. And Sketch has evolved into something better over a year, like the latest file format since version 43; maybe it makes the InVision team hold on the beta features. (I’m just guessing 😅) And for sure InVision team won’t stop at this version, as alway product is an iteration process.
Now let’s start to play with all the features of Prototype! ✨
Once you have installed or update Craft Manager and Plugin, you will see a thunder icon ⚡️ at the bottom of the Craft panel. Unlike the beta version of the icon that is similar to the Craft website and not placed together with the stack of 5 features (Sync, Library, Data, Duplicate, Freehand).
Old (Left) vs New (Right)
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 is any latest update you need to update it. Craft Manager and the Craft Sketch plugins are 2 different update process, and sometimes my friends will miss out one of them. Below is a walkthrough of the updating process.
Keep your Craft Manager and Plugin up to date! (I’m at v1.0.31 as of this article)
Open your Sketch file with design inside, and then press on the Prototype icon ⚡️, you will get this message for how to begin:
Now, select one layer and then press C to start to link 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 be staying there until you select one of the artboards.
You still can navigate around in the same page
Once you have decided the artboard you want to link and click on it, you will see a popup with several options to choose: Link to a screen or Link as Overlay. For gesture option there are: Click and Hover for desktop prototypes; Tap, Double Tap, Swipe Right, Swipe Left, Swipe Up, Swipe Down for mobile prototypes.
Designs are from ThriftRocket: a side project I’m working with my friends in Singapore. 🚀
You need to give a proper interaction based on either 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 gesture. All the Gesture and Transition options are same as InVision website prototyping option. Will go into this later on.
Once you have pressed Add Link, you will see a curvy arrow link to indicate the layer is connected to which artboard. This is new from the beta version which after you added a link you won’t seen 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 by without selecting any artboard or layer, or you can just see the particular artboard link arrow only. Below is the example:
Toggle to view the link arrows you created
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 did it. 😅
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 your layer. 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:
Anchor Link is useful for Back to Top interaction
Link Back/Close is quite straight forward. It basically will link back to the previous screen that links from. Close is for closing Overlay.
Unlike the beta version, now the External URL only can link to a website. In the beta version, there is an option to embed Google Maps, YouTube, Vimeo link into the prototype. I think it is because the current InVision prototype website can’t achieve this feature yet.
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 can’t modify the link pointer to point to another artboard. You need to remove the link and then create a link again to link to the artboard you wish, for now.
All the links (hotspots) you have made with Craft Prototype ⚡️ in Sketch can be sync into InVision project by using Craft Sync feature. This makes the prototyping workflow much faster comparing making the hotspots in InVision project.
I have 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 pain. 😭
New option available in Sync: Include hotspots when syncing
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 by making hotspots with Craft Prototype, the link/hotspot only can be edit in Sketch, you can’t edit or remove the link/hotspot inside InVision project.
And if you have created hotspots in InVision project, it won’t magically sync to your Sketch Prototype. Currently, there is no way to do both ways, but let’s hope in the future this can happen magically~ ✨
Different color of hotspots in InVision project
As the above screenshot, the yellow color hotspot created in Sketch with Craft Prototype, which you will get the message “This hotspot can only be edited using Craft Prototype” if you click on it. The blue color hotspot created with the InVision project in the browser, which there is no way to sync it into Sketch file, for now.
✅ Fast and stable
✅ Designing and prototyping in the same app Sketch
✅ Bird’s eye view of prototype links
✅ No need internet connection when prototyping
✅ Very useful if you’re heavily using InVision
❌ Missing 7 features that available in beta version
❌ No way to interact with the prototype unless you sync to InVision project
❌ Can’t mirror prototype to iOS device
At Minitheory, we’re using InVision for most of our client works like collaboration between designers, managing client’s comments, prototyping, dev notes and Inspect for our front-end developers. It is part of our most important design workflow, and I’m sure the new Craft Prototype definitely will improve our workflow in Minitheory. ⚛️
Is it suitable for you? It depends. Just like I said, if you are heavily using InVision yourself or in your organization, Craft Prototype helps your workflow. But nowadays there are many prototyping tools out there, and they might more advance compare to Craft Prototype. I’ll suggest you choose the tool that will seamlessly fit into your workflow so that you and your designers and developers can collaborate way faster! ⚡️
I’m hoping the InVision team will keep innovating with the Craft to bring better features soon to fit into 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.
AI-driven updates, curated by humans and hand-edited for the Prototypr community
