A quick tour of InVision Studio

Tutorial Breakdown

InVision Studio’s layout is intuitive and easy to navigate, and its tools are designed to be familiar. In this tutorial, we’ll tour the interface and breakdown the anatomy of a Studio document so you can start your projects off on the right foot.

In this introductory tutorial, we’ll look at:
  • The welcome window
  • A tour of the interface
  • The anatomy of a document
  • Saving Studio files


Welcome to InVision Studio. Before we jump in and start creating, let’s take a quick tour of the Studio interface and see where things are and why. The first time you open Studio, you’ll be presented with a log in window, where you’ll log in using your invisionapp.com credentials. If you don’t already have a free InVision account, just head to the bottom of the dialog and you can choose Create Account. Once you’ve created your account, just sign in with your email address and password. Once you’ve signed in, you’ll be presented with the Welcome Window. From the Welcome Window, you can create a new blank document. Open a recent studio or sketch file. And then in the bottom half, we’ve got additional resources, including a link to all of the learned Studio videos-- like this one. There are also some tutorials on the right hand side that are interactive and will open up a Studio demo file so you can get playing with these features right away. As far as the new document presets are concerned, we’ve got Mobile, Tablet, Desktop, and a New Blank Canvas. And the three device presets actually have sub menus that reveal additional device types within that category. I’m going to start with a blank canvas so we can examine the canvas itself. Now, we’re in and looking at our brand new Studio document. The Studio interface is broken up into four main parts. On the left hand side, we have the Layers list. The Layers list become populated as we start creating layers on the canvas or within an art board, which we’ll talk about here in a moment. At the top of the screen, we have a toolbar and the toolbar is contextual. Depending on what we have going on, we’ll see different options at the top of the screen. If-- for example-- I create a couple of rectangles, with a rectangle selected, we’ve got tools across the top that will allow me to interact with one or multiple objects selected. For now, we won’t go into each tool individually, but just be aware that on the left hand side, we’ve got the option of creating new objects, such as shapes, text layers, and images. As well as some editing tools. Followed by our publishing tools on the right hand side. The third part of the interface is the right hand side called the inspector. The inspector is where you’ll find all the visual properties for the selected object or objects. The inspector is contextual, as well, and it will show different options depending on whether or not you have a shape selected, or a text layer, or an art board. But again, we’ll look further into that as we start editing and creating shapes. The fourth part that dominates the middle of the screen is called the canvas. And the canvas is an infinitely sprawling area where you can create your design work. It’s important to note, however, that the canvas itself isn’t so much a container for screen design so we’ve got to create those containers ourselves and those are called art boards. Let’s create an art board now. I’m going to start by deleting these rectangles that I’ve created. And then from the toolbar at the top of the screen, we can click to create a new object and the bottom most option will give us the art board. You can also press the letter A on the keyboard to switch to the art board tool and your cursor will now allow you to click and drag and you art board. Or from the inspector on the right hand side, you’ll see that our options have changed to show all of our preset art board sizes. If you skip that and you create your first our board freehand, that’s no problem because you can always select the art board and from the inspector, our very first option here is to switch the device type so you can always switch to a different device preset. Here, you can also switch between portrait and landscape, depending on what you’re designing for. You can have as many art boards as you want and when pages start getting really populated, you can create new pages within your document from the top of the Layers list. You can see here that we’re currently on page 1. And this plus sign will allow us to create a new page. The back arrow will allow us to switch the Layers list to a page browser where we can navigate between our pages. And double clicking will return us to the Layers list for that page. Art boards do have a couple of tricks up their sleeves, such as the Layout options on the right hand side, where you can choose a number of columns, rows, or even enable a grid in order to keep your layouts more pixel precise. One last piece of the interface that’s not displayed at all times is the Preview window. When you’ve created a design with an interaction and you’d like to preview how that interaction will work on a device, the Play button at the top of the screen will bring up the Preview window. And the Preview window will allow you to navigate as if using a real device. Additionally, when you’ve completed a design, you can head back up to the toolbar and you can publish your prototype directly to your InVision account. In fact, if you’re at the early stages of design, you can launch a freehand directly from within Studio and collaborate live in real-time with your team. And finally, saving a Studio file is just as you’d expect. We can head to the File menu where you’ll find both Save and Save As. When saving a Studio file, just give it a name, which you’ll find ends with the extension .studio. And choose a home for it. Now, we’re ready to move forward and import some design work.

Transformative collaboration for all the work you do