Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Layers Panel

Located on the left side of Studio is the layers panel. This panel contains:

  • Pages
  • Libraries 
  • Artboards and layers specific to the selected page
studio-layers-panel.png

To search for a specific artboard, group, or layer, type the object's name in the Filter Layers field in the layers panel.

studio-filter-layers.gif
The Filter Layers option only searches the current page. To filter layers on a different page, you will need to select that page in your document.

Pages

In Studio, you can organize your designs into multiple pages. The layers panel will display the layers for the selected page only. To see the page list (if you've created multiple pages), click the Pages tab at the top of the layers panel. To create a new page, click the + button next to Pages. To rename a page, double-click the current page name.

studio-pages.gif

Artboards

Artboards are at the top of the layer hierarchy and contain your groups and layers.

To create a new artboard:

  1. At the top left of the document, click the large + button and select Artboard. Alternatively, use the keyboard shortcut A. 
  2. From the right-hand panel, click one of the recommended artboard sizes. Or, click and drag on the canvas to create a custom size.
studio-create-new-artboard.gif

Like with pages, you can rename an artboard by double-clicking the artboard name in the left-hand layers panel. To re-order artboards in the layers panel, click and drag them to the appropriate location.

Libraries

The Libraries section in the layers panel lets you access components from either your document library or a shared library. To add a file as a library, click the + button to the right of the Libraries section.

To search for a specific component, click a specific library in the Libraries section and begin typing the component name. 

studio-filter-components-in-library.gif

Masks

When a layer is masked, an arrow icon (studio-masked-layer-icon.png) appears next to that layer in the layers panel. The mask layer has an eclipse icon (studio-mask-icon.png). Any shape can be turned into a mask. To create a mask, select the shape and, in the top toolbar, click the mask icon (studio-mask-icon.png). Alternatively, right-click the shape and select Mask, or use the shortcut ⌃⌘M (on Windows, Ctrl+Alt+M).

studio-create-mask.gif

Hiding and locking layers

To hide a layer, group, or artboard in Studio, hover over the object in the left-hand layers panel and click the eye icon (studio-hide-layer-icon.png). Alternatively, you can use the shortcut ⇧⌘H (on Windows, Ctrl+Shift+H). Hiding an object will hide it from the canvas in Studio, but it will still be visible in the layers panel.

studio-hide-layer.gif

To lock any layer or group, hover over the object in the left-hand layers panel and click the lock icon (studio-lock-layer-icon.png). Alternatively, right-click the object and choose Lock Layer, or use the keyboard shortcut ⇧⌘L (on Windows, Ctrl+Shift+L). Locked objects can be selected from the layers panel only.

studio-lock-layer.gif

In addition to individual layers and groups, you can lock entire artboards. Locking an artboard will lock all layers from being selected on the canvas. While locked layers can be selected from the layers panel only, locked artboards can be selected and moved on the canvas.

Interaction

If a layer has an interaction, it will be marked by a lightning icon (studio-interaction-icon.png) in the layers panel. Any type of layer (including artboards) can have interactions. Each interaction has a trigger type, a target artboard, and a transition type. For more information on interactions, you can skip ahead to this article: Managing Interactions

Interaction1.png
Layers with interactions

Boolean operations

Combined shapes are created using Boolean operations. They are marked in the layers panel by an icon of an overlapping circle and rectangle.

studio-combined-shape.png
Combined shape

To create a combined shape, select the layers you want to combine. In the top toolbar, select 1 of 4 Boolean operations:

  • Union Selection (studio-union-selection.png)
  • Subtract Selection (studio-subtract-selection.png)
  • Intersect Selection (studio-intersect-selection.png)
  • Exclude Selection (studio-exclude-selection.png)
For more information on each of these operations, check out the "Toolbars and shortcuts" table in this article: Studio UI Tour

A combined shape will be created that contains the selected layers. To change the Boolean operation for a specific layer, click the symbol next to the layer in the layers panel, and choose a new Boolean operation.

studio-create-combined-shape.gif

Selection

Hovering over a layer in the layers panel or on the canvas will highlight a layer with a blue outline. Selected layers have a blue background in the layers panel, and a blue bounding box appears around the layer on the canvas. You can select one or more layers at a time.

studio-selecting-layers.gif
Selecting components is the same as selecting layers, but you will notice components are marked by purple text, as well as by purple bounding boxes and outlines.

Learn something new

Getting Started Guides