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.
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.
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 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.
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:
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.
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.
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.
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 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.
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 Vertical, Horizontal, or Both. Once the scrolling setting is defined, you can then scroll the content of the artboard when viewing the screen preview in Studio or the published prototype on InVision.
Note that to see scrolling when previewing your prototype, 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 prototype 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.
Grids and guides
You can define unique settings for the grid on each artboard. To use the grid, select an artboard and, under Layout Grid in the Inspector panel, click the Columns, Rows, and Grid checkboxes as wanted.
The following grid settings are available:
- Columns: Edit your Count, Gutter, Margin, and Color settings.
- Rows: Edit your Height, Gutter, Margin, and Color settings.
- Grid: Edit your Size and Color settings.
To refine your grid settings, click the More icon () next to each checkbox and use the corresponding text field or drag the 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).
To snap objects to your grid or layout guides, you can enable smart guides: In Studio menu bar, click the View menu, Layout, and then Show 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).
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.
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.
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.
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.
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.