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 below. These are contextual tools that extend the behavior of the primary tool.
Selector VUse this drop-down menu to create layers. The selector tool is used to interact with layers. By selecting a layer you can see its properties and styles in the inspector. Combine the selector with the Option key (Alt) you can duplicate layers. Combine with the spacebar key to navigate the canvas. Combine with the Shift key to select multiple layers. Hovering just outside of the corner layer handles and holding the Command key will change the selector tool into a rotate tool.
|Shape||R, U, O||Use the drop-down menu from the selector 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 patch 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.|
|Zoom||See below||Zoom in/out on your canvas.|
|Interaction||C (with selection)||Use this to trigger an action. Your interactions become active inside the preview window.|
|Create Component||CMD+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.|
|Device mirroring||Currently no shortcut||View your project in real time on your device by mirroring it.|
|Rotate||Command+Shift+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.|
|Preview||CMD+P||Use this to preview your project inside Studio.|
|Sync||Currently no shortcut||Sync your project to your InVision account.|