Infinite in size, the canvas gives you complete freedom on how you set up your design area. You can add one or more artboards and layers to it, then move them around by dragging.
Zoom in or out on your canvas by using shortcuts or gestures on your touch pad, or by using the zoom options on your toolbar. Zoom functions include the following:
- Zoom to 100% (CMD+0): A zoom setting of 100% provides the most accurate view, because each image pixel is displayed by one monitor pixel. At other zoom settings, image pixels are interpolated to a different amount of monitor pixels.
- Zoom to fit (CMD+1): This enables you to see your whole document area on-screen.
- Zoom to selection (CMD+2): This zooms to a portion of the canvas that you select.
- Center selection (CMD+3): This function centers canvas on the layer you’ve selected.
- Zoom in (CMD+=): Use this function to simply zoom in on your canvas.
- Zoom out with (CMD+-): Use this function to simply zoom out on your canvas.
Located on the left, the layers list contains both pages and artboards with all layers. You can view each layer attribute (such as hidden, locked, masked), or rename and organize layers.
In Studio, you can organize your designs in multiple pages. The layer list will display the layers of the selected page only. To see the page list, click the back arrow at the top left. Click the add button (+) at the top right of the layer list to insert a new page. To rename pages, double click the layer.
Artboards in the layer list contain only the layers inside the artboard. Artboard layers are at the top of the hierarchy, and cannot be contained within another artboard.
Pages list in the Layer panel
Searching the artboards and layers list in the Layer panel
Searching components in the Component Library
A small arrow icon shows you when a layer is masked. The mask layer has a small eclipse icon. Any shape can be turned into a mask. To create a mask, select the shape and click on the mask (small eclipse) icon in the toolbar. Alternatively, select the shape then right click and select Mask.
Mask and masked layers
Hiding and locking layers
All layer types can be hidden and unhidden by clicking the eye icon that shows on hovering the layer in the layer list. A hidden layer will become grey and have the eye icon on the right. To lock any layer, press ALT while hovering over the layer list and click the Lock icon that appears.
In Studio, you can also lock artboards. Locking an artboard will lock all layers from being selected on canvas. Locked artboards can be moved around on canvas. Locked layers can be selected from the layer list only.
Hide icon on hover
Hold [Alt][Option] key to see Lock
If a layer has an interaction, it will be marked with the small lightning icon in the layer list. Any type of layer (including artboards) can have interactions. Each interaction has a trigger type, transition type, and one target. For more detailed transition, choose Motion which allows you to customize delay, duration and curve.
Layers with interaction
Combined shapes are created using boolean operations. They are marked in the layer list with a small icon of a circlex with a rectangle on top.
Hovering a layer in the list or on the canvas will highlight a layer with a blue outline. Selected layers have a blue background in the layer list and bounding box around the layer on canvas. You can select one ore more layers at a time.
Hover layer: Layer list
Selected layer: Layer list
Selected layer: Canvas