Background from Unsplash

🙏 Don’t Overlook Prototyping Skill

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:

✨ Out of Beta after >1 year

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! 😭👍

🤔 But, There are Some Changes…

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:

• Create native text input field: This is my most favourite feature, for now not many other 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 Contact Us screen, or if you are working on video apps. (Example)
• Fixed Headers and Footers: Very useful feature if you had a very long screen and wanted to have fixed header or fixed bottom navigation for your app prototype. (Example)
• Connect iOS device and interact the prototype: In the beta version, we can 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 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! ✨

Initial Screen

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)

Start Prototyping

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

Link Artboard

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.

Toggle to View Link Arrows

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

• 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 arrow, 1 comes 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 from 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 did 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 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

Link Back/Close is quite straight forward. It basically will link back to the previous screen that links from. Close is for closing Overlay.

External URL

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 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 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.

Sync Prototype Hotspots to InVision

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.

Pros and Cons

✅ 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

🤔 Can Craft Prototype Improve Our Workflow?

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.