×

Inspector

Located to the right of the canvas, the inspector panel displays settings and options including alignment, layer properties, and layer styles. To view inspector details, simply select a layer from the layers list.

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.

Studio inspector: Set alignment options.
Alignment options

Single layer alignment

When a single layer or group is selected, the alignment is defined relative to the artboard. If the layer is an orphan layer (i.e., if it is placed outside an artboard), alignment is disabled.

studio-inspector-single-layer-alignment-horizontal.gif
Horizontal alignment relative to the artboard

studio-inspector-single-layer-alignment-vertical.gif
Vertical alignment relative to the artboard

Multiple layer alignment

If two or more layers are selected, the alignment is defined relative to those layers (rather than to the artboard). When aligning to the left, right, top, or bottom, the layer located furthest from the newly defined alignment will align to the layer that is closest to the newly defined alignment. When aligning to the center or middle, the layers will align to the center of the selection area the layers create.

studio-inspector-alignment-multiple-layers-horizontal.gif
Horizontal alignment of two layers

studio-inspector-alignment-multiple-layers-vertical.gif
Vertical alignment of two layers

studio-inspector-alignment-multiple-layers-center-and-middle.gif
Center and middle alignment of two layers

Group alignment

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

Locked layer alignment

Locking one or more layers that you do not want to move lets you then align other layers relative to the locked layers. With both the locked layer (or layers) and the specific layers you want to align selected in the layers panel, clicking any of the alignment buttons in the inspector panel will align the unlocked layers relative to the locked layer, which will not move at all. With only a locked layer selected, the alignment buttons in the inspector will be disabled.

Layer alignment distribution

The two alignment buttons closest to the right side of the inspector panel let you distribute layers. You can use these two options with three or more layers selected. Whether distributing horizontally or vertically, your layers will align—inside the selection area created by all the layers—with equal space between each layer.

Fixed alignment

The pin icon is used for fixed positioning of a layer or group. For example, you can use the pin to establish a sticky header. When scrolling with the pin applied to the header, the content of your artboard will scroll while the header remains fixed in place.

Responsive alignment with anchor points

The additional pinning options to the right of the Rotate field let you use anchor points to pin a layer or group to a specific area of the artboard, so you can resize the artboard without the need to realign the pinned layer or group. To pin a layer or group for responsive alignment, click one horizontal and one vertical anchor point, or click either line of the + in the center of the horizontal and vertical anchor points. Alternatively, to the right of the anchor point icons, click the Vertical and Horizontal drop-down arrows and choose Top, Bottom, or Middle for your vertical alignment and Left, Right, or Center for your horizontal alignment.

studio-responsive-alignment-anchors.gif
Setting responsive alignment anchors

Layer properties

Layer properties become active when one or more layers are selected. Layer properties include position (on the X axis and Y axis), size (Width and Height), rotation (Rotate), flipping (studio-layer-flipping-icons.png), responsive anchor points shown above), Blending, Opacity, and (for some layer types) Radius.

To quickly adjust the value of a layer property, click and drag its label. You can also lock the aspect ratio of the Width and Height attributes by clicking the lock icon.

studio-inspector-drag-values.gif
Changing values by clicking and dragging the label

Layer flipping

To flip (or invert) any layer, group, combined shape, text, component, or image on either its horizontal or vertical axis, click the corresponding icon or use the keyboard shortcut:

  • Horizontal: studio-layer-flipping-horizontal-icon.png (shortcut: Shift-H)
  • Vertical: studio-layer-flipping-vertical-icon.png (shortcut: Shift-V)

Artboard scrolling

To emulate the scrolling behavior commonly used in digital products, you can enable vertical or horizontal scrolling for an artboard. With the artboard selected, in the inspector, click the Scrolling drop-down list and click Veritical, Horizontal, or Both. Once the scrolling setting is defined, you can then scroll the content of the artboard when viewing the project preview in Studio or the published project on InVision.

Studio inspector: horizontal scrolling
Horizontal scrolling

Note that to see scrolling when previewing your project, the viewport must be smaller than the artboard. For example, if your artboard fits the dimensions for an iPhone 8, you cannot see vertical scrolling if previewing the project as an iPhone X because the viewport would be longer than the artboard; however, if you change the preview viewport to an iPhone 8 (or any smaller model), you will see the scrolling.

Grid and layout guides

You can define unique settings for the grid and layout guides on each artboard. To use layout guides, select an artboard and, under Layout, click either or both of checkboxes for columns and rows. Then, use the Count, Gutter, and Size text fields to set your layout guides as wanted.

studio-inspector-layout-guides.png
Layout guides

To adjust the width, count, gutter, or margin of your layout, click the column icon (studio-inspector-layout-column-icon.png) or the row icon (studio-inspector-layout-row-icon.png), and then use the corresponding text field or scrubber. For example, to adjust the margin, click the Margin text field and enter any numerical value (including numbers beyond 100, for complete precision) or drag the scrubber (value limited to a max of 100).

After clicking either the column or row icon, you will also notice you can change the color and opacity of your layout guides by clicking Color and dragging the two scrubbers as wanted.

studio-inspector-layout-margin.gif
Layout margin

To use a grid, select an artboard and, under Grid, click the checkbox. Then, use the Size text field or drag the scrubber to set the size of your grid.

studio-inspector-grid.png
Grid settings

Pro Tip: To snap objects to your grid or layout guides, you can enable smart guides: In Studio menu bar, click View menu, Layout, and then Toggle Smart Guides.

Math

Studio gives you the option to perform math operations in all numerical fields of the inspector. You can add (+), subtract (-), multiply (*), or divide (/) simply by entering the desired math symbol in the numerical field to establish an equation (e.g., 150+50px).

studio-inspector-plus-minus-value-changes.gif
Add and subtract

studio-inspector-multiply-divide-value.gif
Multiply and divide

For X or Y axis, Width, and Height, you can specify a percentage value of the artboard that the layer is part of. Once defined, adjusting the artboard will respect the percentage value.

studio-inspector-size-percentage.gif
Percentage for width and height

studio-inspector-x-y-percentage.gif
Percentage for X and Y

studio-inspector-size-percentage-to-artboard.gif
Percentage while artboard changes

LAYER STYLES

Fills, strokes, shadows, and inner shadows

Add new style attributes to a layer by clicking the label or + in the desired section. You can add multiple attributes of the same style. To reorder attributes, simply click and drag them. To hide an attribute, click the checkbox on the left. To delete an attribute, click and drag it out of the inspector, or right-click to use the 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 transitions between states. To add an interaction, select a layer or an artboard in the layers panel, click Interactions or the + button in the inspector, and then use the drop-down menus to customize your interaction.

Exporting

You can export any layer, group, or artboard from your Studio prototype. To add an item for export, at the bottom of the inspector panel, click the Export + button. Then, in the Size field, enter the size multiplier you want (e.g., 1, 2, 3, 4, etc. or 1x, 2x, etc.) and Studio will automatically scale the asset accordingly when exporting. To define a prefix or suffix, click the Prefix/Suffix drop-down list. To choose either JPG or PNG for the asset, click the Format drop-down list. Repeat the steps for each item you want to export. Once you have added all items you want to export, click the Export Layers button (note that if you export only one item, this button label will include the name of the item rather than ‘Layers’).