3b. Working with Layers

Layers

Layers are the individual elements of your prototype. They represent what you are going to see, when previewing your prototype. This section will go over using the layer list and working with layers in the canvas.

The layer list

The Layer list is home to all of the “pieces” of your prototype. The basic shape of the layer is shown as a silhouette next to the layer name. This is where you create, delete, reorder, nest, and duplicate layers.

Hiding/showing and locking layers

Clicking the corresponding icons will hide/show the layer on the canvas and lock the layer in place.

Selecting layers

Single clicking a layer will select that layer. Holding Ctrl/Command and clicking on layers, will select multiple.

Holding Shift and clicking on a layer will select the range of layers.

Adding a layer

New layers will be added above the selected layer.

Deleting a layer

You must select a layer prior to deleting. Deleting a parent layer will delete all of the child layers.

Duplicating a layer

The duplicated layer will appear above the original, with Copy appended to the name. Duplicated layers keep all interactions, animations and child layers.

Layer clipping

Toggling this will either display or hide the selected layer's clipping on the canvas.

Renaming a layer

Double click on the layer's current name to rename it.

Reordering

The order of layers in the list, dictates the order of layers in the canvas. The top layer, will sit in front of all layers, while the bottom layer will sit behind all layers. You cannot interact with layers that visually sit behind another layer. To allow this, the layer in front needs to be transparent (opacity 0).

Nesting

Nesting layers is important when setting up complex animations or scroll views. Child layers will move and inherit all of the properties of the parent layer. This can also be used to group layers together, for ease of use and animating.

Layers on the canvas

The canvas is the visual representation of your prototype. The box in the center is the device's screen. Anything that is within the bounds of this box, will be seen on the preview. A layer's size and position can be manipulated on the canvas, allowing you to organize and line up your layers. Here is a breakdown of the actions you can make on the canvas.

Selecting

You can select a layer by clicking on it in the canvas or selecting it in the layer list. Click on an empty section of the canvas to deselect all layers.

Holding Ctrl/Command and clicking on multiple layers will select them.

Clicking and dragging on an empty section of the canvas will draw a bounding box. All layers wholly or partially contained in the bounding box will be selected. Holding Alt/Option while clicking and dragging will only select layers wholly contained in the bounding box.

Moving

To move a layer, just click and drag it to it’s new position. Smart guides will snap the layer to align with other layers and the screen. The position coordinates update in the center of the layer, as you move them around the canvas.

Please note, having multiple layers selected at once will not move all the layers. They must be moved one-by-one or by changing the X and Y properties.

Resizing

The side and corner anchors can be used to change the dimensions of the layer. Holding shift will lock the proportions, allowing you to scale the layer.

Feedback and Knowledge Base