Browser not supported

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


Working with Studio Layers

Once your project has been created, you’re ready to start adding layers and creating your designs. All objects have their own layer. Groups and artboards are used to organize your designs.

Adding and selecting layers

Begin adding a layer by using the dropdown menu in your toolbar. When drawing shapes, there are various ways to create them. Hold down your Option (Alt) key to draw from the center of the new layer. Use the Shift key to make a perfect square or a circle. You can also hold the Spacebar while drawing so that you can move the shape in the canvas.

studio-add-layer.gif

Add layer.

studio-shift-key-perfect-circle-square.gif

Use the shift key to make a perfect circle or square.

studio-alt-key-draw-from-center.gif

Use the Option (Alt) key to draw from the center.

Clicking on a layer on the canvas shows the selection handles on the canvas and selects it in the layers list. To select a layer, you can also click it from the layers list directly. Select multiple layers by holding Shift-Command while clicking to select the range of artboards or layers.

To select layers that are part of a group, hold Command (⌘) while hovering over the layer on the canvas. Alternatively, you can double click a group and that will expand the group in the layer list and allow selection on canvas. Pressing the return key while a group is selected will drill down the selection to select the first child.

Moving and resizing layers

Click and drag layers to move them on the canvas. Using the arrow key you can move one or more layers. Holding Shift key along with the arrow keys will move the layer or layers by 10px. Hold the Shift key to move layers only in the X and Y axis. Layers inside an artboard can also be moved by using the alignment options or the X/Y values in the Inspector pane.

To resize a layer, select it and use the handles around the layer to adjust the size. Hold the Option (Alt) key to resize the layer from its center. Hold the Shift key to keep its aspect ratio as you resize it.

studio-layers-resize-using-handles.gif

Resize using handles.

studio-layers-resize-using-alt-key.gif

Resize using Option (Alt) key.

studio-layers-resize-using-shift-key.gif

Resize using Shift key.

To resize a layer from the Inspector panel, use the layer properties to adjust its width and height. Using the arrow keys + Cmd (⌘) will allow you to change the width and height of a layer by 1px, and holding the Shift key along with the other keys will change the width and height value by 10px.

Rotating layers

The easiest way to rotate a layer is to select it from outside the corner handles, then hold Shift while rotating. Inspector rotation values will update while you’re rotating it on the canvas.

Grouping layers

When you group layers in your file, they’ll show as one layer in your layer list. Similarly to single layers, you can resize and move grouped layers while still having access to the layers inside.

To create a group, hold Command-G and select one or more layers. Alternatively, click Arrange in the top menu or right click your selection. To ungroup, use Shift-Command-G.

Studio does not support empty groups, so if you move or delete the last layer/s in a group, Studio will also automatically delete the group itself.

Styling layers

Edit and change a selected layer’s style properties in the inspector.

Organizing and removing layers

Add and rearrange multiple fills, borders (including gradient colors), shadows and inner shadows. Click and drag the style up or down to reorder it. The easiest way to remove a style is to drag it outside the Inspector.

studio-deleting-color-fill.gif


Another option is to right-click to show the options menu, then click Delete.

Fills

From solid colors to different types of gradients to images, there are many different fills you can add to your layers. To switch between them, click the fill color icon and choose one of the top three icons. Each fill has opacity control on the right of the fill color.

studio-fill-options.png


At the bottom of the fill popup is a library of colors including Global colors, Document colors, and Recently used. Add any color or gradient to these libraries.

There are also numerous ways to animate layer fills—including image fills—in Studio.

Image fills

Studio treats all images as layer fills, giving you the power to add shadows, opacity, and secondary fills or even override any images you convert to (or use within) a component.

To add an image fill to a shape layer, in the inspector panel under the Fills heading, click the fills icon. In the upper-right corner of the fills dialog, click the image icon and then drag and drop an image into the dialog or click select to choose an image from your Mac Finder. Finally, click the Mode drop-down arrow and select one of four image fill modes:

  • Fill: The image will retain its original aspect ratio and fill the shape layer. This is the default mode.
  • Fit: The image will be resized to fit within the shape.
  • Stretch: The image will be stretched as needed to fill the shape.
  • Tile: The image will be tiled within the shape, based on the scale you set by editing the Size text field or dragging the scrubber.

If you add an image directly to your file—rather than creating an image fill within a shape layer—and want to edit the fill properties, click the image layer in the layers panel or the image itself on the canvas. Then, in the inspector under the Fills heading, click the fills icon to access and edit your properties.

Borders

You can apply borders to all layers. Shape layers can have multiple borders with various colors, weights, and positions.

Copy paste styles

Copy Paste Styles copies all the styles from a selected layer and copies them to your clipboard, allowing you to paste those styles onto another layer. This action will apply all your appearance properties, including transparency, fill, border, shadow, and blur.

Shadows

Shadows and inner shadows can be cast on shape layers. Shadows are rendered outside and behind a layer, while inner shadows render inside and in front of a layer. Multiple shadows can be applied to a shape layer. Control the X and Y position, Blur, Color, and Opacity. The shadow will render no matter the Zoom %.


Learn something new

Getting Started Guides