Welcome to InVision Studio

Tutorial Breakdown

Welcome to InVision Studio, the world’s most powerful screen design tool. Designers are rapidly evolving the world we live in by determining how humans interact with technology. Using InVision Studio, frictionless rapid prototyping and advanced animation help you unlock new dimensions of screen design. Your work-in-progress isn’t just interactive—it’s alive.

In this introductory tutorial we’ll look at:
  • What is InVision Studio?
  • The InVision Studio workflow


Welcome to the early access of InVision Studio. We’re so excited for you to join the thousands of designers taking part in this exclusive release. Studio brings together essential tools to create beautiful designs and powerful prototypes in one place, keeping you in your creative flow from start to finish—so let’s get started.

From the Studio launcher, you can start on a new idea from scratch or pick up where you left off on an existing project. With vector drawing tools, boolean operations, masks, and layer styling properties, you’ll be composing beautiful design work in no time.

We know it’s never too early to test out what your screens will look and feel like when they come to life. To rapidly transform your designs into an interactive prototype, select any element and press C on the keyboard to connect it to another artboard. Choose a transition, and you’re done.

Then, you can preview your ideas directly inside Studio and make edits in real time without losing your flow. When you’re ready to take the fidelity of your prototypes to the next level, the Motion transition gives you complete control over the animation that takes place between every single layer.

Studio automatically links up the matching layers between the two screens and animates the differences. The transition editor then allows you to fine-tune the timing of each layer and even preview in slow motion for outrageous precision.

As your projects begin to scale, design elements can be turned into components for reusability and consistency across every screen. You’ll find your organized component library at the top of the layers panel on the left-hand side where you can drag and drop directly onto the canvas. You can select and edit a component to update every single instance effortlessly. For the occasional exception, the properties of each layer within a component instance can be edited and overwritten for just that one individual instance.

Studio’s seamless connection to InVision makes it fast and easy to publish and republish your work with a click. When viewing a Studio prototype on the web, you’ll see exactly what you saw in the Studio preview window—same animations, same fidelity—without any compromise.

When it’s time to share your prototype, collaborators can use comments to share and address instant feedback. When you’re ready to start building, Inspect allows developers to view specs, grab assets, and even code directly from your prototype. All of this happens in one place. Welcome to InVision Studio.

Transformative collaboration for all the work you do