×

Inspector

On the right, the inspector panel displays settings and options once you click on a layer. Those settings and options include alignment, layer properties, and layer styles.

Alignment

At the top of the inspector, you’ll find options for aligning and distributing layers. Select one or more layers to begin making alignment choices.

Alignment1.png

Single layer alignment

When a single layer or group layer is selected the alignment is to the artboard. If the layer is an orphan layer (outside an artboard), alignment is disabled.

SL-Alignment1.gif
Horizontal alignment to the artboard

SL-Alignemnt2.gif
Vertical alignment to the artboard

Multiple layer alignment

If two or more layers are selected, the alignment is between those two (or more) layers. Then aligning to left, right, top, or bottom, the furthest layer will align to the side of the closest layer for the selected alignment orientation. When aligning to the center or middle, the layers will align to the center of the selection area the layers create.

Mult-Align-1.gif
Horizontal alignment of two layers

Mult-Align2.gif
Vertical alignment of two layers

Mult-Align3.gif
Center and middle alignment of two layers

Group alignment

Aligning a group is similar to aligning a single layer; it will align to the artboard. Aligning a group will also move any locked layers inside the group.

Locked layer alignment

Aligning layers to specific layers without moving the specific layers works by locking the specific layer. Select the locked layer from the layer list and the layer you want to align. It will align to the locked layer, while the locked layer will not move at all. When selecting just a locked layer, the alignment options will be disabled.

Distributing layers

The last two buttons in the alignment panel are for distributing layers. It can be used with 3 or more layers. When distributing horizontally or vertically, the layers will align to have the same space between them on the axis that you select inside the selection area create by all layers.

Layer Properties

Layer properties become active when one or more layers are selected. Layer properties include position, size, rotation, anchor points, blending, opacity and for some layer types, radius.

Click and drag on a label to quickly adjust its value.

LayerProp1.gif

LayerProp2.gif

Math

Studio has the option to perform math operations in all numerical fields of the inspector. You can add (+), subtract (-), multiply (*) and divide (/). 

Math.gif
Add and subtract

Math2.gif
Multiply and divide

For X, Y, width, and height, you can specify a percentage value of the artboard that the layer is part of. Adjusting the artboard respects the assigned percentage value.

MathA.gif
Percent for width and height

MathB.gif
Percent for X and Y

MathC.gif
Percent while artboard changes

LAYER STYLES

Fills, Strokes, Shadows, Inner Shadows

Add new style attribute to a layer by clicking the label or + in the desired section. You can add multiple attributes of the same style. Attributes can be reordered by dragging. To hide, use the checkbox on the left. Delete by clicking and dragging out of the Inspector, or right click for a delete option.

Interactions

Studio’s connection tool lets you quickly link screens together or dive deeper into micro-interactions to animate between states. You can animate layers individually and customize easings between states. To add an interaction on a layer or artboard, click on the interactions label or + in the inspector.

Exporting

Add one or more exportables in the bottom of the inspector. Here you can add any layer, group or artboard, by clicking the export label or +.