Skip Navigation

Developer Handoff

Learn how developers can inspect your designs and export assets in our web app — no Mac required.

With the Inspector tool in the web app you can select and measure between layers on Artboards, view layer attributes, and copy values to your clipboard. To use the Inspector tool in the web app, make sure you are viewing an individual Artboard, then click on the Inspector tab in the sidebar.

Inspecting in the web app is available for all members (Editors and Viewers) and Guests with Inspect permissions in a Workspace by default. For documents you upload to My Drafts, you can enable the web app Inspector for anyone you share them with from the Document Settings menu.

How to inspect layers

When you open the Inspector tab, by default, you’ll see the current Artboard’s attributes in the sidebar, including its dimensions, a background color (if applied) and any layout settings. From there, you can click anywhere on the Artboard to select a layer and see its properties in the Inspector.

Where layers overlap, you can Control-click over the layer you want to select and choose it from the contextual menu that appears. When you select a layer, the Inspector will update to display its attributes.

Where layers overlap, you can Control-click over the layer you want to select and choose it from the contextual menu that appears. When you select a layer, the Inspector will update to display its attributes.

Control-clicking on your Artboard brings up the layer selection menu to choose between overlapping layers.

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

Note Default values such as 100% opacity or a Normal blend mode are hidden to keep things simple.

Note: The Mac app uses the macOS coordinates system, which measures in points — where one point is equal to one pixel on an @1x display. For handoff, points in the Mac app are largely the same as CSS px measurements. Read more about measurements in Sketch.

How to inspect Symbols

When you select on a layer that belongs to a Symbol, we’ll highlight the Symbol on the Artboard and show a card for it in the Inspector. To select the Symbol directly (to measure its distance from other layers, for example), Control-click on the layer and choose the Symbol’s name from the contextual menu.

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 on the Symbol’s name or arrow icon (→) on the Artboard, or on the card in the Inspector.

Note: We’ll always show you the latest version of the Symbol Source, even if you came from an older version of a document.

In this example, we are selecting the Symbol Hotel Thumbnail from the contextual menu, jumping to its Symbol Source and inspecting it in detail.

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’s sidebar. You can head to its Symbol Source from the Symbol card in the sidebar or you can click on it’s name or the arrow (→) on the Artboard.

In this case, Item Inactive is a Nested Symbol to the Symbol Default — we are just selecting and inspecting the Nested Symbol

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 — you’ll still be able to see the Symbol’s name as well as the name and path of the Library where it’s in.

When a Symbol is part of a Library thats not available, you wont be able to click on its card in the sidebar or on the Symbols name.

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

How to measure between layers

Select a layer on your Artboard and then hover over another to display measurements that show the relative distances between them.

How to copy layer attributes

To copy an individual attribute in the web app Inspector, hover over it and click to copy the attribute. You’ll see a notification to confirm you’ve copied it to your clipboard.

Copying individual attributes only copies the value itself (not the attribute name) to the clipboard, for example:

#000000

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

Type: Linear
Angle: 180˚

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

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

Note: Copying a Layer or Text Style copies the name and path (which Library and group it belongs to) to your clipboard.

How to copy colors and Color Variables

To copy a color value to your clipboard, hover over the Color label and click. To change the format (to Obj-C or Swift, for example), click on the arrow next to the current value and pick the format you need from the list.

When you click on a Color Variable in the Inspector, you’ll see it’s 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.

In this example, the Color Variables name is Pink, it belongs to a group called Brand and its not part of any Library.

The formats you can choose from are:

  • HEX
  • RGB
  • HSL
  • NSColor (Objective-C and Swift)
  • UIColor (Objective-C and Swift)

When you select a color format, the web app Inspector will save your preference and copying a different color attribute will use the same format as your original selection.

In this example, we are choosing Objective-C as the format to export our color and copying it to our clipboard.

Note: At this time, Tints are not available in the web app Inspector.

How to inspect and copy Shared Styles

When you select a Text or a Layer Style, you’ll see its details in the sidebar. 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.

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

How to copy multiple attribute values

To copy multiple attribute 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 specific attribute for the layer you’ve selected.

How to copy text

To copy text to your clipboard, head to the Content section in the Inspector, hover over the copy and click on it.

Exporting assets

As well as being able to inspect documents in the web app, anyone with Inspect or Edit permissions can now download assets that are set as exportable in the Mac app. Asset exports happen on request and only for the person that requests them.

How to export individual assets

Head to any Artboard within your document on the web app and select the Inspector tab in the right sidebar. From there, click on any layer on the Artboard to bring up its Inspector attributes.

If that layer has had export options set for it in the original Sketch document, you’ll see those export options at the bottom of the sidebar.

Click on the download button next to any of the export options to download the layer in that format. If you select a format that has multiple sizes or resolutions, your download will include every size or resolution for that format.

In this example, the PNG export is available at 1x and 2x resolution, so these appear together and download in a ZIP file.

To download the asset you’ve selected in all formats, sizes and resolutions, click the download button next to All Formats.

Note: If you select a layer and expect to see export options but the Inspector tool does not show you any, it might be that the exportable layer is hidden behind another layer or within a group. Try Control-clicking on the layer to view the selection menu and look for a layer with the Slice Create a slice icon. This indicates a layer has export options.

How to export all assets

To export all of the assets in a document, navigate to its overview page and click on the Export Assets button at the bottom of the right sidebar. You’ll get the option to download the final files in ZIP format.

There may be a short wait for the assets to process before you can download them, depending on their size.

Depending on the total size of the assets you’re exporting, you may be able to download your assets straight away, or you may see a notification that explains the export is processing and that we’ll notify you once it’s complete.

If you have to wait for an export to process, don’t worry, you can navigate away from your document on the web app and we’ll send you an email to let you know when it has finished.

How to make sure you can export assets from the web app

In order to export and download assets from the web app, you’ll need to have done the following in the Mac app first:

If the Export Assets button in the web app is greyed out or individual assets don’t show any export options, it’s because there aren’t any layers or Artboards set as exportable in the document. You’ll need to add slices or set layers, groups or Artboards as exportable in the Mac app first.

Last updated on 03 Aug 2021

Was this article useful?

We’re really sorry about that.
Please let us know what you were looking for:

If you need more help or you’d like to report a bug with this content, please contact support.

Thanks for your feedback.
An error occurred, please try again later.