Recently, I had an opportunity to travel to Boston to witness a demo of the red-hot upcoming design tool, InVision Studio. I came back downright excited. Weird, right? Think long and hard about the last software tool that you even cared about. So what is it about Studio that has me so fired up? Let me break it down for you.
First off, I might not be quite so excited if this were any other developer. But this is InVision we’re talking about! They’ve singlehandedly become the go-to tool for prototyping and an irreplaceable part of any product designer’s toolkit.
More to the point, prototypes are the key to successful products. They let you vet ideas, test functionality, wow stakeholders, and provide a clear blueprint for developers in a way static screens and PDFs simply don’t. And tapping into that potential means you need a demo-able, clickable, and (most importantly) shareable prototype.
With Studio, InVision has bold plans to become a designer’s favorite thing ever. It’s nothing less than a completely end-to-end design tool that rivals, if not surpasses, our beloved Sketch.
InVision Studio reduces responsive design to the click of a button, with dynamic content that moves, shifts and wonderfully flows when the screen size changes. On top of that, you get a fully functional prototyping engine that lets designers quickly link screens and objects into complex webs of interactions.
Best of all, this is done without any extra plugins (goodbye Craft) and can be previewed in the app! No more laboriously syncing files, waiting, going to a website, hunting for your project, and then finally getting to preview your work. It’s all right at your fingertips — and it’s glorious.
InVision could’ve stopped there and still had a great piece of software, although savvy designers might’ve pushed up their glasses and said that Figma still had an advantage. (And they would not be wrong. Figma is a great tool. Honestly, better than it has any right to be while running in a web browser.)
But InVision Studio has one more trick up its sleeve… Animation. And that’s what’s going to take product design to a whole new level.
Building a digital product?
Words will do a poor job of explaining this feature, so check out some of these dribble worthy examples of InVision Studio in action:
InVision designer @noamliss turned to #InVisionStudio to quickly concept a mobile app idea that would take @usemuzli’s design inspiration on the go ⚡️ https://t.co/DswatviBBd pic.twitter.com/85pfSKTJ0y
— InVision (@InVisionApp) November 17, 2017
New #InVisionStudio Jam by @charlespattson! Take a closer look at his minimalist TV UI with hover states, swipe tracking, animation delays, and more—on @dribbble https://t.co/96COPWDeMw pic.twitter.com/89bRLdjKTy
— InVision (@InVisionApp) November 16, 2017
Rocked this https://t.co/Eh78LdUcMD concept w/ #InVisionStudio—in a fraction of the time it would’ve taken before!⚡️ https://t.co/keGs1OEJK1 pic.twitter.com/dmTNwTD8Su
— Noam liss (@NoamLiss) October 31, 2017
The animation system is what makes Studio shine. Having designs that move and scale and transition in your design tool is a magical moment. It’s glorious and beautiful and it’s exactly the sort of thing that will make using digital products exciting, memorable, and just plain fun.
The InVision Studio animation system was built from the foundation of Macaw, the brainchild of Tom Giannattasio — whom I had the pleasure of meeting (and clinking beer glasses with) at the Boston preview event. Check out some shots from the event below:
Coming from a background in animation — both digital and traditional (read: hand-drawn) — animation is a passion of mine and one that’s sorely missing from most modern design tools. Sure, After Effects exists, as does Principle. But they’re separate apps, often complicated, and ultimately just not a seamless fit for most developers’ workflows.
Studio allows seamless, simple transitions between objects and artboards. Combined with states (yes, states, such as hover) and built-in prototyping, InVision Studio breathes new life into screen design and adds new dimensions to prototyping. Couple that with the ability to edit animation curves, adjust timing, and preview movements in slow-mo, and you’ve got a combination that feels new, fresh, and most importantly powerful.
And I haven’t even gotten to the best part: because the animations are based in code, developers don’t have to struggle to achieve a designer’s vision. Much like the godsend that is the ‘Inspect’ mode, InVision Studio promises direct access to animation code. Trust me, your developers will be thrilled.
I could write so much more about InVision’s plans for version control, managing complex design systems, or (gasp) a brand new version of the InvisionApp.com prototyping hub — but I’ll save those stories for January, when Studio is finally out in the wild and I’ve had some quality hands-on time.
Just know that for the first time in a loooong while, I am excited for a piece of software. And if InVision manages to deliver on even a portion of its promise, you should be excited too.
