Inspect

To inspect a design in the web app, click the Inspect icon in the toolbar to open the Inspector and the Layer List. From here, you can select any layer on the Canvas or the Layer List to view its properties and measurements.

The Layer List

The Layer List shows all layers in your document and helps you find and select the layers you need to inspect. Where layers overlap, you can use the Layer List to select the layer you want to inspect. Click the ••• icon in the Layer List to show the contextual menu for any layer.

As soon as you select a layer, the Inspector will update to show its properties.

Using the Layer List

From the Layer List, you can:

• Open Symbol Source: Opens the Symbol Source for a selected Symbol instance in a new browser tab, so you can inspect its contents in detail.
• Open Frame or Open Top-Level Frame: Right-click a frame in the Layer List to jump straight to its contents.
• Go to Layer: Pans and zooms the Canvas to focus on the chosen layer.
• Copy Link: Copies a link to that specific layer.
• Copy CSS: Copies the CSS rules for the current layer to the clipboard.
• Export as: Exports any layer. See Exporting assets to learn more.

Searching layers

At the top of the Layer List, you’ll find the search bar. Use it to filter layers by name. Matching layers appear along with their parent groups or frames, so you can see them in context.

Inspecting layers

The properties that you see in the Inspector panel will depend on the type of layer you’ve selected and the values for that property. For example, when inspecting borders, we’ll show its basic properties, like color or position, as well as any border options like dashes, gaps, cap or join styles.

Measuring between layers

Select a layer, then hover over another to display measurements that show the relative distances between them.

Inspecting Symbols

When you select a layer that belongs to a Symbol, we’ll highlight the Symbol on the frame and show a card for it in the Inspector. To select the Symbol directly (to measure its distance from other layers, for example):

• Use the Layer List
• Right-click a layer on the Canvas, then use Select to choose a specific layer.
• Select the Symbol directly on the Canvas.

If a Symbol you’ve highlighted or selected is part of a Library in your Workspace, or local to the current document, you can jump to its Symbol Source. To do this, click the Symbol’s name or arrow icon (→) on the frame, or from the Inspector.

Nested Symbols

When you select a layer within a nested Symbol, or a nested Symbol itself, we’ll highlight it on the Canvas and show you the information relative to the nested Symbol or layer in the Inspector panel. You can head to its Symbol Source from the Symbol card in the Inspector panel, or click its name or the arrow (→) on the frame.

If a Symbol is part of a Library that’s not saved to your Workspace, you won’t be able to inspect its Symbol Source. However, you’ll still be able to see the Symbol’s name as well as the name and path of the Library it’s from.

When you’ve finished viewing or inspecting a Symbol Source, you can return to the frame you were previously inspecting by pressing your browser’s back button.

Copying layer properties

Select a layer, head to the Inspector panel, hover over the property, and click to copy it to your clipboard.

Copying individual properties only copies the value and not the property name to the clipboard. For example: #000000

Layer properties with multiple values (such as a gradient with different colors, opacities, an angle and gradient type) will include both the value and the property name to the clipboard, for example:

Type: Linear
Angle: 180˚

Color Stop 0
Color: #8763FF
Position: 0%

Color Stop 1
Color: #6236FF
Position: 100%

Copying multiple property values

To copy multiple property values at the same time (such as all the values that make up a text layer, or all the values of a shadow), hover over the heading above the group of values (e.g. Shadows, Borders, Text) and click on it. This will copy all of the values related to that group of properties for the layer you’ve selected.

Copying colors and Color Variables

Hover over a Color label and click to copy its color value to your clipboard. To change the format (to HSL or Objective-C, for example), click the arrow next to the current value and pick your preferred format from the list.

When you click on a Color Variable, you’ll see its whole path (if it’s part of a group or Library), as well as its name and color value. You can copy all of a Color Variable’s values by hovering over the Color label and clicking on it. Viewing and copying individual values for Color Variables or gradients works in the same way: hover over the name of the value and then click on it.

You can also export Color Variables as design tokens. You can choose from HEX, RGB, HSL, NSColor (Objective-C and Swift), and UIColor (Objective-C and Swift) formats.

When you select a color format, the Inspector will save your preference, so when you copy a different color property you’ll see it in the same format as your original selection.

Copying shared Styles

When you select a Text Style or Layer Style, you’ll see its details in the Inspector panel . There, we’ll show you the full path of the Shared Style you’ve selected and whether it belongs to your current document or another Library.

Copy a Text or Layer Style by hovering over the Text Styles or Layer Styles heading and clicking on it.

When a Layer or Text Style is out of sync with the original, you’ll see the name of the style in italics with an asterisk (*) next to it.

Copying text

Head to the Content section in the Inspector panel, hover over the content and click to copy it to your clipboard.

Copying CSS properties

To copy CSS properties to your clipboard for any Layer or Text Style and Symbol, select the component and click Copy CSS on the top right of the Inspector.

Viewing designs with Grids and Layouts

Select a layer or frame inside a frame, click the Inspect button , then open the Zoom dropdown menu in the canvas controls to toggle Show Grid or Show Layout options. You can also press ⇧G and ⇧H respectively.