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.

Add layer

Use the shift key to make a perfect circle or square

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 key + Cmd (⌘) and then click to select the range of artboards or layers.

To select layers that are part of a group, hold Cmd (⌘) 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.

Resize using handles

Resize using Option (Alt) key

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 Cmd (⌘) + G and select one ore more layers. Alternatively, click Arrange in the top menu or right click your selection. To ungroup, use Shift + Cmd (⌘) + G.

Note: 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. Another option is to right-click to show the option 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.

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

Shadow and inner shadow 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, Spread, Color and Opacity. The shadow will render no matter the Zoom %.