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 Inspect tab in the sidebar.

Inspecting in the web app is available for all members (Editors and Viewers) and Guests. Simply check the “Can download and inspect” option when you set View permissions. 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.

Viewing designs with Grids and Layouts

When you’re viewing an Artboard with the Inspector tab active, you can toggle Grid and Layout visibility from the zoom menu to give you an additional point of reference as you inspect designs.

Right now, you can only change a document’s Grid or Layout settings in the Mac app.

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.

Tip: You can ignore groups when inspecting layers by holding and hovering over any layer. This way, you can focus on inspecting the properties of those elements within the group.

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.

Note: You can also export Color Variables as Color Tokens through the web app.

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.

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.

When a Layer or Text Style is out of sync with the original one you’ll see the name of the style in italic and a * next to it. We’ll also show you which values are out of sync and what the original values are.

An image showing a dirty text style in the web app inspector

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.

How to copy CSS attributes

To copy CSS attributes to your clipboard for any Layer or Text Style and Symbol select the component and click on the Copy CSS button in the top-right side of the Inspector.

Exporting Color Variables as Color Tokens

If you’ve got a document or Library with Color Variables, you can use it to create Color Tokens and keep your development projects in perfect sync. You can download Color Tokens in CSS or JSON formats, or generate a URL for that format that stays up to date with any changes you make.

In the web app, open the document or Library you want to work with and select Color Variables from the list of Views in the right sidebar. Then, click on the Export Color Tokens button on the bottom left corner of the screen.

You can download Color Tokens in CSS or JSON formats, or generate a URL that stays up to date with any changes you make. Use the drop-down menu to switch between CSS or JSON formats, then press Download to save a copy of the Color Tokens. To generate public links, you can use the drop-down menu at the bottom and press Copy Link.

To generate a public URL for your Color Tokens, choose from the following options:

  • Enable Link for the Latest Update: This will always point at the latest update of the document’s Color Variables
  • Enable Link for the Latest Star: This will always point to the latest starred update of the document. If the file has no starred update, it will fall back to the latest update
  • Disable Link: Any links will no longer work and instead show a 404 error.

Note: Only Editors and Admins can enable or disable links. However, Viewers can copy any link that is already enabled.

How to integrate Color Tokens with development projects

You can use public Color Tokens URLs in tools like Storybook to bring in the latest changes, but we don’t recommend you use them directly in a production environment.

We’ve put together an example project to show you how you could integrate Color Tokens with your development projects. You can also find more information on working with the Amazon Style Dictionary format we use for JSON Color tokens in their documentation.

Exporting assets

As well as being able to inspect documents in the web app, anyone with Edit permissions can download assets marked as exportable in the Mac app. Members with View access can also export assets, so long they have the “Can download and inspect” checked in their document permissions. The asset export process only takes place when someone requests it and the the download is only available for the person that requested it.

How to export individual assets

Head to any Artboard within your document on the web app and select the Inspect 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, click on the Export Assets button at the bottom of the right sidebar, under the About tab. 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 09 May 2022

Was this article useful?

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