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.
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.
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.
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 or both horizontal anchor points and one or both vertical anchor points, 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, Middle, or Top and Bottom for your vertical alignment and Left, Right, Center, or Left and Right for your horizontal alignment.
Setting responsive alignment anchors
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.
See the differences between containers and groups in the following table:
|Scale / Transform||If not pinned, transforming the container will not modify the child layers.
If pinned, child layers will scale with the container when transforming it.
|Child layers scale uniformly when transforming their parent group.
If pinned, child layers will scale when transforming the artboard that contains the group rather than scaling if the group is transformed.
|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||Alignment options for child layers are relative to the container boundaries.||Alignment options for child layers are relative to the artboard.|
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.
Responsive alignment with containers
Converting a group of layers in Studio to a container lets you align the layers relative to the container rather than the artboard. Containers also give you the option to avoid scaling the child layers when resizing a container itself. You also have the option to pin the layers to their container, so the layers individually adjust with the container as you modify it. Think of it this way: A Studio container behaves like a mini artboard within an actual artboard.
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
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)
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.
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.
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).
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.
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.
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.
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
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.
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.
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.
Note: 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.