Published on | Prototyping: From UX to Front End — Medium Darcey Beau

Invision has recently launched a free design tool called Invision Studio. I’ve had an opportunity to use it for a real-life project over the last couple of weeks.

This tool was scheduled to be launched on 1st January 2018. However, I received my invite to use the Beta program only a couple of weeks ago which wasn’t the greatest of starts. Albeit, it’s certainly forgivable considering software development can throw up some unexpected delays sometimes (!)

1. Aesthetics

My first thought of the jet-black interface was “woah, this looks cool”. However, after about 5 minutes things started to annoy me with the lack of contrast to define key areas of the app. Luckily, they have a “Light” theme which was a pleasant surprise. It made the transition from SketchApp (Sketch) a lot easier.

Overall, the interface and controls are extremely similar to Sketch, but made to look ‘lighter’ by dimming down contrast and basic form lines etc. It’s a good effort, but I almost feel as if they’ve tried to minimalise the UI far too much.

Invision StudioSketchApp

To be fair; It does looks cool, but it occasionally confuses my brain. Then again, I’ve only been using it for a week, so I’m hoping I’ll get used to it.

2. Importing from SketchApp

From what I gathered from feedback online, it seemed everyone had a pleasant experience importing from Sketch. For me? No. It was not as smooth as I had anticipated.

InvisionStudio does tell you about ‘some’ issues with importing with .Sketch files

There were small, but significant miss-aligned assets which took ages to fix. Maybe when you’re importing >10 iPhone screens it’s not a big deal. But for me, I’m frequently importing 50+ complex desktop screens with loads of assets and layers. So it was biggest time-waste to re-align everything

You see the small miss-alignment of the light-grey header (top left of InVision aotrboard) is slightly different

Another thing is InvisionStudio will miss-align (and sometimes totally miss) Sketch Symbols. I love symbols because they save me so much time to create prototypes and they’re the no.1 most important thing for big complex projects. Once one link is broken it can take a while to fix.

3. Component library

InVision have their own “component library” tool (which, admittedly, is a far better name than ‘Sketch Symbols’) but it’s weird. In Sketch all your “symbols” (components) are laid out in artboards where you can jump around and have a look at everything.

InVision on the other hand, only allow you to search and view one at a time? I don’t understand this decision? Surly the whole point of a component library is to be able to view all of your components to see if there is a universal alignment and consistency in your app? So to view one at a time makes no sense whatsoever…?

4. Laggy in-app experience

My biggest issue with InvisionStudio is the lagginess of the platform. I’m using a MacBookPro 2017 15inch, 2.9 Ghz Intel Core i7 running High Sierra 10.13.4 and I don’t think I’ve experienced a design to be so laggy…

I appreciate if a file is <85mb then you should expect ‘some’ lagginess during scrolling and zooming. However, even during a blank canvas and file sizes below 8mb scrolling around the artboards generate extreme lag.

Sometimes, using the trackpad on my MacBook Pro just stops working with the app, and you’re only left with cmd +/- to zoom in-and-out. This ruins my workflow dramatically. It becomes less of a fluid experience when designing for multiple screens.

I’ve tried all sorts of remedies to fix this problem — uninstalling/reinstalling, trying my back-up laptop with different operating system. Starting projects from scratch and rebuilding screens… etc. Nothing worked.

The app is a little bit of an oxymoron in the sense that initially it looks clean, light and minimalist. However, in reality it’s actually quite large, clunky and laggy.

5. Laggy prototyping experience

By far the most frustrating ‘laggy experience’ is on the online web-portal prototyping tool. When you send your prototype to the web (the place where you’d normally upload .JPG’s and stitch them together to form a low/high fidelity prototype) I’ve experienced about a 16-year delay when using the scroll function in my prototypes… literally takes ages to scroll.

I’ve tried almost everything to try an limit this: Lowering file-size, indexing layers concisely, changing the width and height of the screens, different browsers and installing new browsers — nothing seems to fix this problem.

It’s frustrating because it has the potential to be a complete game-changer for designer/developer interaction. Especially for remote teams. But it’s just not there right now, which makes me feel like this…

<a href="https://medium.com/media/d58f499f753c26a8abc066606f9c0c53/href">https://medium.com/media/d58f499f753c26a8abc066606f9c0c53/href</a>

Conclusion

Overall, this app is awesome, but it is still in Beta. It’s definitely on the right tracks but it’s nowhere near perfect. — Invision, if you’re reading: please, please, please fix the lagginess and trackpad zoom!

I haven’t used the transitions element in the app due to the nature of the project I was working on (It wasn’t required). But I do plan on testing this out on a dummy project shortly.

I do believe InvisionStudio would work perfectly adequately for small feature projects (i.e. 1–10 screen flows), anything larger and more complex — it’s just not able to handle this workload (yet). I think the larger projects is when you start to have performance issues

In the meantime, I’ll be heading back to Sketch and using Marvel in the hope some of this feedback is taken onboard

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

InvisionStudio: First thoughts was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

InvisionStudio: First thoughts

Cool stuff, every week

More Articles