Important links

Related articles

Inspector Panel

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.

Alignment option

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.

Horizontal alignment relative to the artboard

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.

Horizontal alignment of two layers

Vertical alignment of two layers

Center and middle alignment of two layers

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 position

The Fix Position icon () is used for fixed positioning of a layer or group. For example, you can use this feature to create a fixed header or footer. When scrolling, the content of your artboard will move while the header remains fixed in place. To learn more, check out the article Fixed headers and footers in Studio.

Responsive alignment with pinning

Below the Rotate field in the inspector panel, you have several options for pinning a layer or group to a specific area of the artboard. This allows you to resize the artboard without realigning the pinned layer or group.

To pin a layer or group for responsive alignment, click the desired points on the graph. Alternatively, to the right of the graph, click the Vertical and Horizontal drop-down arrows and choose Top, Bottom, Middle, or Top & Bottom for your vertical alignment and Left, Right, Center, or Left & Right for your horizontal alignment.

Pinning for responsive alignment

Groups and containers

Studio offers two ways to gather layers together for collective editing and alignment: Groups and Containers.

To convert a group to a container, select the group and, near the top of the inspector, click Container. To revert the container to a group, select the container and click Group.

Think of it this way: a Studio container behaves like a mini artboard within an actual artboard.

To view the specific differences between containers and groups, check out the following table:

Task

Containers

Groups

Scale / Transform

If the layer position is fixed, transforming the container will not modify the child layer.

If the position is not fixed, child layers will scale with the container when transforming it.

Child layers scale uniformly when transforming the parent group.

Position

Child layers’ X and Y values for placement behave relative to the container boundaries rather than the artboard boundaries.

Child layers’ X and Y values for placement behave relative to the artboard boundaries rather than the container boundaries.

Boundary indicators

When dragging or resizing child layers, a solid outline appears to indicate the boundaries of the container. (This is also true of components.)

When dragging or resizing child layers, a dashed outline appears to indicate the new boundaries that will be applied to the group.

Pin

Pinning options for child layers are relative to the container boundaries.

Pinning options for child layers are relative to the artboard.

Pinning within groups

Layers pinned within a group are relative to the artboard, not the group. You can also pin any locked layers.

Pinning within containers

When you convert a group of layers to a container, you can pin the layers relative to the container rather than the artboard.

If you need to resize a container, but you don't want to scale a layer within that container, unpin the layer from the edge of the container you are resizing.

In order to unpin from a side, you may also need to pin the layer to the opposite side of the container you're resizing.

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 (), 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.

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: (shortcut: Shift-H)

Vertical: (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.

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.

Layout guides

To adjust the width, count, gutter, or margin of your layout, click the column icon () or the row icon (), 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).

The Width and Height values must be adjusted using the input fields, as neither setting has a scrubber available.

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.

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.

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).

Add and subtract

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.

Percentage for width and height

Percentage for X and Y

Percentage while artboard changes

Layer styles

Fills, borders, 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 JPG, PNG, or SVG (the default format) 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’) or use the keyboard shortcut, CMD-Shift-E.

To include the background color of an artboard when exporting, select the artboard and, in the Background section of the inspector, click the Include in Export checkbox before clicking the Export + button.

Include artboard background in export

Known Limitations with SVG Exporting

Our Studio engineers are hard at work to address the following SVG export limitations:

Text does not yet export.

Blend modes do not yet export.

Outer shadows are not yet exporting perfectly.

Images are not yet rendered as sharply in browsers as they are in Studio.

Nested component instances that are rotated currently get clipped when exporting.