Invision Studio, the prototype stud
--
I was fortunate enough to be included among the select few that got to test out the early preview of the new Invision Studio. The new kid in the classroom everyone heard about, but few actually saw.
First things first. The design tools.
Although limited at first, I was really impressed by what I was able to pull off in a couple of hours of free time and some imagination.
The tools are as basic as they get in terms of what a UI, UX and Interaction Designer need.
You have your select tool
You have your Rectangle/Circle/Rounded Rectangle Tools
And finally you have your run of the mill pen, text, image and artboard tools.
And then you have the tools you’re already accustomed to, because they are part of Sketch too.
From left to Right:
- Add Interaction
- Create Component
- Scissors (the one allowing you to break shapes into paths)
- Edit Path
- Shape Operators (Union, Subtract, Intersect, Exclude). No divde yet. Sorry
- Mask
I feel like even if those are pretty suggestive by themselves, proper UX etiquette dictates they should still have a form of label beneath them. Because its always easier to find what you’re looking for when you know what you need. Plus it makes the learning curve significantly less steep.
Craft is gone. Long live “Share to Invision”
Invision Studio being part of Invision, craft is no longer required for you to sync your prototypes to Invision. HOWEVER, I would strongly suggest that if you are on a free account, you resist the urge of syncing all your projects.
Reason is that as of yet, you cannot delete any prototype from invision. Which means you’ll be stuck with a bunch of test projects clogging up your invision account. This is not something you’d want if you’re on the basic account version where the limit is 3 projects.
Aside from that, let’s get into it.
The interface is pretty straightforward. You can create a new Prototype or sync to an already existing one. No options as to what type of prototype is created. Unfortunately, if you don’t remember or are not careful when you originally create the prototype, you cannot roll back and change the type (web to mobile,etc), at least not to my knowledge.
You also have the option to test your prototype on mobile, but I’m yet to discover how this thing works, because the mobile app doesn’t have any QR Code scanning abilities (YET).
Once the sync process is complete, you are presented with a notification that everything went ok. Um… yeah… I expected to be able to click that and be taken straight to the prototype link or at least be presented with a choice to do so or close the notification. Not the case.
Component symbolize building blocks
Stupid pun aside, Components are the new Symbols. From a name point of view, it makes perfect sense to have renamed them as such. I’ve never really understood why “Symbols” and not “Components” or “Blocks”.
Really interesting the fact that Invision Decided to split off Symbols from main functionality by moving them to a special “library part”. The really annoying part is navigating back to your artboard though. (in the second image, the artboards/layers are active. however, you can still see your symbol.)
The right or wrong panel
On your right side, you have the already famous panel, that’s omnipresent in almost all apps that have parameter-driven design tools. And not only.
It should be fairly familiar due to the fact that it’s much like the one you’re probably using in Sketch, Adobe Photoshop or Affinity Designer. No idea about Adobe XD. I don’t use it.
Going top-to-bottom, we got:
- Align and Distribute Tools
- Position & Size editboxes with pin & lock. As of right now, I’m still trying to figure out how Pin works. Or doesn’t.
- Rotation Edit box. Why is this thing not a tool ? Beats me. UX Issue
- Rotation pinning (?) or actual Pinning controls for the abovementioned Pin tool. Beats me. Will find out. UX Issue
- Component part. Still determining what I can do with components to their full extent.
- Blending and Opacity. Nothing you haven’t seen before.
- Fills, Strokes, Shadows. Missing: Blur. UX Issue
- Interactions. YES. Very yes !
That last bit, is basically everything you need to create really cool protos straight out of the box, without having to pay for an additional tool. And this is where shit goes bonkers. You can actually tweak animations via timeline. If you select “Motion” instead of “Preset”, you can manually tweak stuff via this window:
This is minus some features is what I always dreamed to be able to do without leaving my UI Design tool. Interactions.
Inter-fucking-actions.
Being able to share your prototype with clients and team is essential in creating a delightful UX. And this will help you out in that respect. Why ? Because you won’t need to leave the app you’re working with, export, plugins, all that crap. One app to rule them all.
I mean… just look at that shit… all done in a single file. How ?
MAGIC. No seriously. It’s fucking magical. I’ll let you guys know how that works (to the extent I was able to test at least).
The Magic
Gandalf is weaksauce. Magic happens in IS. If you want to animate something its as easy as making all the assets available in one artboard, duplicating it, then wiring the interactions from the first to the second one.
Very important: Make sure you select “Motion” instead of “Presets.
Finally, you edit the second artboard. Move stuff around, rotate, skew, whatever. Tadaaa
If you want to see how I’ve done it on my Waffle demo, have a go at it by downloading the file from here: https://www.dropbox.com/s/17b3hi4s6s451zn/Waffles.studio?dl=0
Rejoice.
Still not sold?
It’s free. As in you’re not paying shit to use this thing. What do you want more ? You can make a free account, not pay a dime for that, get this thing, go bonkers and use in in commercial projects, learn. Whatever.
Invision says they’ll keep it free. I’m skeptical. If it was me, I wouldn’t hand out a disruptive tool like this for free for long. They’re probably in the adoption phase, building hype.
In closing
It’s by no means perfect, and lacks a lot of features for most people. But for me, as I’ve already stated, it’s a solid design tool that allows me to cut on costs by keeping one tool that does both animation/interaction AND ux and ui. Fucking awesome in my book. I was really suprised to see it preview with this many features. Traditionally, most MVPs are usually a joke and a bad one at that. But this one is different.
Give it a spin. See how you feel about it. :)
