The Studio UI is comprised of a few components:
- Toolbar: The toolbar is centered along the top of Studio and features tools and buttons for actions. These are contextual tools that extend the behavior of the primary tool.
- Canvas: The canvas is set in the middle and this is where your designs live.
- Layer list: The layers list is on the left contains both the pages and the artboards with all layers.
- Inspector: The inspector is on the right side of Studio and contains all the properties for the selected layer(s), it will adapt to show all the options you need.
Toolbar and shortcuts
At the top of your Studio screen, you’ll find the tools included in the table below. These are contextual tools that extend the behavior of the primary tool. We've also compiled a comprehensive list of Studio shortcuts in our Knowledge Base.
|Insert||Currently no shortcut||Use this drop-down menu to search and insert a component and to insert artboards, shapes, paths, text, and images (all described in the rows below).|
|Zoom||Full size: ⌘0
Center Selection: ⌘3
Zoom In: ⌘+
Zoom Out: ⌘-
|Zoom in and out on your canvas.|
|Use the drop-down menu from the Insert tool to create shapes. There are 3 types of shape tools: rectangle (R), round rectangle (U) and oval (O). All types function the same. Hold the Option/Alt (⌥) key to create a symmetrical shape from its center. Hold down Shift (⇧) to make a new shape a perfect square or circle. Creating a shape while holding the space bar will allow you to reposition the starting point.|
|Pen||P||Use the drop-down menu from the selector tool to choose the pen tool. Starting in pen mode will start creating a new shape based on the points you create. It can be an open path or closed path shape. Go into pen mode by entering Edit Path on shapes. In pen mode you have the ability to add, edit, and remove the points that build the shape.|
|Text||T||Use the drop-down menu from the selector tool to choose the text tool. Once you click on the canvas, a new text layer will be inserted. Double clicking a text layer from the select mode will go into text mode.
While in text mode or when a text layer is selected, the inspector on the right side of Studio changes to show you all the properties that apply to text. Here you can change the color, font, style, alignment and many more options.
|Image||I||Use the drop-down menu from the selector tool to choose the image tool. Go to insert and choose image or drag and drop an image inside the canvas.|
|Artboard||A||Use the drop-down menu from the selector tool to choose the artboard tool, which allows you to create working areas inside the infinite canvas.|
|Interaction||C (with selection)||Use this to trigger an action. Your interactions become active inside the preview window.|
|Create Component||⌘K (with selection)||Use components to create easy to re-use elements from your document.|
|Cut path||Currently no shortcut||Use this to select the path’s anchor points, segments, or a combination of both.|
|Edit path||Currently no shortcut||Reshape or edit your path. Once in Edit Path, the selector tool turns into a pen tool, which will allow you to select, add, and remove points.
Multiple points can be selected by dragging an area around them. Corner radius or point types can be applied to multiple points at once.
|Union selection||Currently no shortcut||Transform two or more vector shapes into one combined shape that is the sum of all vectors areas.|
|Subtract selection||Currently no shortcut||Transform two or more vector shapes into one combined shape where the area(s) of the top shape(s) is removed from the bottom shape.|
|Intersect selection||Currently no shortcut||Transform two or more vector shapes into one combined shape with the area of the intersection (overlap) of all vectors.|
|Exclude selection||Currently no shortcut||Transform two or more vector shapes into one combined shape with the area of all non-overlapping areas plus the overlap area of any odd number of shapes and minus the overlap area of any even number of shapes. For two shapes, it’s exactly the inverse of an intersect selection.|
|Mask||Currently no shortcut||Masks are used to show parts of other layers. Mask a layer using another shape layer. Turn a layer into a mask for everything that’s above in the Layer List by selecting 2 layers and clicking on the Mask icon in the toolbar. Or right click the layer(s) and select Mask.|
|Rotate||⇧⌘R||Rotate one or multiple layers, groups, or components. To close rotate mode, click the rotate icon again or press Esc, Enter, or Return on your keyboard. Note that artboards cannot be rotated.|
|Freehand||⇧⌘F||Use this to publish your Studio prototype to InVision Freehand—for real-time collaboration with your team.|
|Preview||⌘P||Use this to preview your project inside Studio.|
|Sync||Currently no shortcut||Use the Prototype tab to sync your project to your InVision account.
Or use the Mirror tab to pair your prototype to your phone or tablet via the InVision iOS app.
|App store||Currently no shortcut||Use the app store icon () to request early access to our new Maker Program. When the app store launches, you will be able to add and manage Studio apps, as well as access your Studio assets library.|
|More||Currently no shortcut||Use the More menu (three vertically stacked dots) to see What’s New in the latest Studio update, learn Keyboard Shortcuts, watch tutorial videos to Learn Studio, and Give Feedback.|