InVision is an industry-standard design platform. In this article we'll learn how to get started with new screen design tool, InVision Studio.
What you’ll learn
- What is InVision Studio?
- How to create artboards
- How to import Sketch files
- Where to find Studio resources
What is InVision Studio?
InVision Studio is a new desktop application that brings screen design tools to the InVision ecosystem. InVision is a prototyping suite that enables stakeholders and designers to ideate, collaborate, validate, and handoff specs to developers—all in a single subscription. InVision has always integrated with Sketch and Photoshop, but now, with the release of Studio, we can design our screens using InVision as well.
InVision is now a complete screen design - design collaboration suite.
Yep, that’s right. No more plugins, no more updates resulting in incompatibilities, InVision Studio works flawlessly with the InVision Web Platform we’ve come to adore.
Studio features include:
- Screen design tools
- Vector editing
- SVG support
- Exporting features
- Responsive resizing
- Reusable components
- Shared libraries
- Design system manager
- Standard transitions
- Advanced animations
- Desktop and device preview
- 2-click sync to the InVision Web Platform
- Compatibility with both Inspect and Freehand
InVision Studio is also free. You only pay for the InVision Web Platform features (Freehand, Inspect, DSM, et cetera) once you’ve exceeded your free forever allowance.
If we factor in other InVision tools, such as Boards (demonstration of creative assets, ideas, and moodboards), Freehand (realtime whiteboard collaboration), Workflow (kanban task tracking), DSM (design systems), and Inspect (design handoff), which integrate with Studio in some way or another, what we have is a truly seamless design workflow that takes the time/frustration out of maintaining multiple app subscriptions.
Shall we have a look?
Whenever the Studio app is opened we’re saluted by the welcome screen, which endows us with ways to start designing in Studio, or to learn how to start designing in Studio. The first thing you’ll notice is the Studio logo with “early access” written underneath it—at the time of writing, the Studio team is still working out the kinks, but we’ll try to keep all content updated as major features and improvements are released.
On the right-hand side you’ll see the file list, which may include .sketch files. This is because Studio is able to import .sketch files, which we’ll discuss in a short moment.
In the Tutorials section you’ll have access to quick demos of Layout, Animation, and Scroll (for those unfamiliar with such features, or for those who may be unsure of how to utilize them within Studio). These little demos are actually .studio files themselves.
In the Resources section:
- Learn Studio (short video explainers)
- Support (basically a manual, for when you’re stuck)
- Give Feedback (to help the Studio team on their quest)
Importing From Sketch
As mentioned earlier, Studio imports .sketch files with near-mirrored accuracy. This feature also extends to symbols (although not interactions), effectively enabling seamless continuity for Sketch users wishing to try out (or switch to) InVision Studio.
Ways to Import Screens From Sketch
- With a keyboard shortcut, ⌘⇧O
- File » Import… (from the menu)
- From the file list (welcome screen)
- Via “Open Studio or Sketch file” (welcome screen)
- By dragging a .sketch file into the Studio app window
- By copying objects from Sketch to Studio (works with Symbols too)
Studio also imports .svg files.
Is It Really Accurate?
Below: Studio vs. Sketch. We noticed only two minor issues. Firstly, emojis wouldn’t appear 😢. Secondly, the line height was incorrect due to it not being explicitly declared in Sketch (the default value of 23 was left unchanged, we fixed it by declaring it as 23).
All-in-all, importing is near-accurate, and will surely improve over time anyway.
Starting a New Studio Project
Importing aside, starting a new document from scratch is fairly easy as well. On the welcome screen, you’ll see four artboard options (iPhone X, iPad Air / Mini, iMac, and Blank Canvas). For those unfamiliar, all modern-day screen design tools have a boundless canvas, where an artboard is like a canvas within a canvas, but with boundaries. These boundaries can be custom, or they can represent a specific device.
Each option is accompanied by a dropdown list showing similar devices:
- iPhone X
- iPhone 8 Plus
- iPhone 8
- iPhone SE
- Galaxy S6
- Google Pixel
- iPad Air / Mini
- iPad Pro
- Nexus 9
- MacBook Pro / Air
- Dell XPS 15
Once you’ve chosen an artboard, adding more to the canvas is super simple — simply tap A to reveal the artboard list (you’ll also notice that there are a few artboards that aren’t available from the welcome screen). The canvas can hold unlimited artboards.
Below: what the canvas might look like if we were designing a responsive website.
InVision Studio Resources
Besides what Studio itself offers via the welcome screen, designers and makers from all over the world have already begun crafting epic resources to help us design better and faster using Studio. Here are the best tutorials, freebies, and communities thus far:
- Studicons — Studio’s first icon set
- InVision Talk — an unofficial forum-type community
- Studio on Facebook — for questions and bug reporting
- Made For Studio — tutorials, UI kits, videos, and inspiration
- #invisionstudio — a Dribbble tag for animations made with Studio
- InVision Studio for UI Designers — a free video course on Udemy
Keen to learn more about Studio? Maybe even master it? Download the InVision Studio Pocketbook (free) to learn not only about ideation, rapid prototyping, high-fidelity screen design, collaboration, animation, and more, but how Studio fits into the InVision ecosystem and your design workflow. Download InVision Studio here.
Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.