Studio is InVision's groundbreaking new screen design tool. In this article we'll learn how to get started.
What you'll learn
- What is InVision Studio?
- Navigating the welcome screen
- How to import .sketch files
- Where to find epic Studio resources
Getting Started with InVision Studio
InVision Studio is a new desktop app that brings screen design tools to the InVision Platform. With the addition of InVision Studio, designers can ideate collaboratively, validate quickly, refine beautifully, and handoff accurately—all in a single subscription.
Studio features include:
- Screen design tools
- Standard transitions
- Advanced animations
- Desktop/device preview
- Responsive components
- Adaptive layouts
- Version control
- Shared design systems
- 2-click sync to the InVision Platform
- Compatibility with Inspect and Freehand
If we include 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.
Other InVision tools aside, though, InVision Studio itself is free.
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 I’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 also 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:
- Give Feedback (help the Studio team on their quest)
- Support (basically a manual, in case you find yourself stuck)
- Learn Studio (more features, carefully explained in short videos)
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.
How to import .sketch files:
- From the file list (welcome screen)
- Via “Open Studio or Sketch file” (welcome screen)
- With keyboard shortcut ⌘ + ⇧ + O
- By dragging a .sketch file into the Studio app window
- By manually copying from Sketch to Studio (works with Symbols too)
Studio also imports .svg files.
Below: Studio vs. Sketch. We noticed only two minor issues. Firstly, emojis didn’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, but will surely improve over time anyway.
Starting a New Project
Importing aside, starting a new document from scratch is fairly easy as well. On the welcome screen, you probably noticed four artboard options (iPhone X, iPad Air / Mini, iMac, and Blank Canvas). For those unfamilar, 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 an artboard has been chosen, adding more artboards to the canvas is super simple (simply tap A to reveal the artboard list). The canvas can hold an unlimited amount of artboards, although we’ll discuss this in more detail in a later article.
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:
- Studio Shortcuts (keyboard shortcuts for Studio)
- Official Facebook Group (for questions and bug reporting)
- InVision Talk (an unofficial forum-type community)
- Studicons (Studio’s first icon set)
- Made For Studio (animations, UI kits, videos, tutorials, and more)
- #invisionstudio (Dribbble tag for animations made with InVision Studio)
- InVision Studio Pocketbook (free), of which this article is the first chapter!
Something to add? Tweet us.
In the coming weeks we’ll be covering InVision Studio from start to finish, discussing not only screen design, rapid prototyping, responsive design, animation, and more, but how Studio fits into the InVision Platform and the typical design workflow as a whole.
Caio for now! 👋
Download InVision Studio here.
Daniel Schwarz is a digital designer, web developer, and maker by background, but a writer, editor, 3x author, and teacher at heart. Currently a design blog editor at Toptal and SitePoint, writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.