How do I use InVision

Team lead asked me to write what InVision products do I use, how I use them, what are pros and cons. I wrote it today, and really think it will be helpful to share my thoughts with wider audience. So, below is the adaptation of what I provided to the engineering management in one fintech company. 

I use InVision to share my hi-fi designs and specs, which I create in Sketch desktop application. This is my primary and every day usage of InVision, and about 90% of all usecases of all InVision products combined. 

I sync designs via the plugin in Sketch made by Invision, called Craft. 

When they are in InVision, we call those designs prototypes. 

It works, but I often experience slowness. Sometimes sync process is failing, and I have to try it again. In Sketch I select one or more artboards, then initiate sync, which sends the artboard to InVision cloud. I have to be logged in Craft plugin with my InVision credentials. Almost every day, especially when I design intensely and re-publish often, the Craft plugin logs me out, and I have to enter my InVision credentials again. Sometimes multiple times a day. All these syncing issues slow me down significantly. I am not sure whether company's VPN is partially responsible for that. 

Invision has excellent sharing and collaboration capabilities. 

Commenting, replying and resolving comments. 

Various online editing capabilities: collaborate in any Freehand or Board when any member of the team can contribute, add, or edit any element of UI, screen, diagram, workflow and so on. 

Among other InVision products, in addition to prototypes, I use Freehands, Boards, and DSM (Design System Manager). This is where they are in my Dashboard:

I use InVision Freehand to create a drawing-like low-fi mock-ups. It’s happening directly in web browser, and looks like one big endless whiteboard. 

Similarly, the Boards are online tool excellent for sharing research results and inspirations (screenshots, flows etc.). 

Freehands are also useful to quickly share entire Sketch file with all artboards to be previewed in one space (page) in InVision cloud. 

We are using DSM, which is also integrated into Craft plugin. For managing, catalogization, and sharing assets within UX team and for engineers. Our Sketch library file is synced with DSM.

InVision serves the purpose: collaboration between teams on UI design, publishing, and sharing. UX team spent quite of some time with engineers demonstrating how InVision prototype’s Inspect mode works. Engineering teams feel comfortable working with InVision today. It’s not an ideal tool though, and there are other alternatives on the market. 

 

We use InVision together with Sketch desktop app. Really, the power of InVision starts from Sketch app. Without Sketch there will be no need in InVision, and its expensive license. 

In addition, the InVision prototype, especially the interactivity of InVision prototype, is pretty weak. It only supports dumb-plain links between Sketch artboards. Which we don’t use because we are not seeing much of the value in them. Artboards view in Sketch becomes too tangled too fast, and supporting all these tangled links is pure manual work. That’s why we design our Client data module and main App Flow prototypes in Axure. Axure has advanced interactive features in its desktop app, which we publish to Axure cloud. And we can run full Axure demo as if the product is already developed including all interactions, animations, conditional routes, reacting differently on user’s input, custom labels on the fly, global variables, events etc. Even export entire prototype into HTML, zip, and email it. It’s impossible with InVision. 

InVision has a desktop tool similar to Sketch app, called InVision Studio. We don’t use it, since Sketch is very powerful, quick, robust, and has unprecedented market adoption. We create all our assets (graphics in svg format), and provide them to UI engineers either through DSM, or in InVision prototypes, or directly in email (rarely). We have extensive libraries and hi-fi designs all done in Sketch app, and transition to other tool will be time consuming. 

Alternatives to Sketch+InVision will be: 

• Sketch+Zeplin – to generate UI specifications and create design system. 
• Sketch+Abstract – the same as above. 
• Figma - no other tools are needed to design, publish and generate specs. Other tool maybe needed for the Design System and styleguides. NOTE: once we convert Sketch file to Figma there is no way back, i.e. there is no conversion tool from Figma to Sketch.
• Adobe XD - anyone?

Of course, all the alternatives will require transition time and learning time. Even more time will be spent explaining the engineering teams that they will need a new software, teach how to use it, and give the access to all teams. 

UPDATE: Time to time I have issues with loading pages in my main browser. It appeared that InVision changes the data structure of cached info in browser, which is not compatible with their previous versions. I experienced issues like all Freehands just disappeared, or DSM will not load. You have to clean cache and cookies periodically in order for InVision to work. How to troubleshoot article by InVision is here.