×

Canvas and Layers

Canvas

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.


Layers list

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.

Pages

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

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.

studio-pages-list.png
Pages list in the Layer panel

studio-search-layers-list.gif
Searching the artboards and layers list in the Layer panel

studio-search-component-library-list.gif
Searching components in the Component Library

Masks

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.

Masks1.png
Toolbar mask

Masks2.png
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.

Hiding1.png
Hide icon on hover

Hiding2.png
Hidden layer

Hiding3.png
Hold [Alt][Option] key to see Lock

Interaction

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.

Interaction1.png
Layers with interaction

Interaction2.png
Inspector panel

Interactions3.png
Motion

Boolean Operations

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.

Selection

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.

Selection1.png 
Hover layer: Layer list

Selection2.png
Selected layer: Layer list

Selection3.png
Selected layer: Canvas