With our browser-based handoff tools, any developer can grab the information they need for any part of a design, at any time. You can invite developers to inspect designs in your Workspace for free — they won’t even need the Mac app (or a Mac) as it all happens in a web browser.
All Workspace Members can inspect documents. You can also invite Guests to inspect documents by enabling the “Can download and inspect” option when you set their permissions in a document’s share settings.
Inspecting layers
To inspect a design in the web app, click the Inspect icon 
in the toolbar to open up the Inspector. From here, you can select any layer on the Canvas to view its properties and measurements.
Open the Inspector, then click on any layer on the Canvas to inspect its properties
Where layers overlap, you can Control-click over the layer you want to select and choose it from the contextual menu. Whichever layer you select, the Inspector will update to display that layer’s properties.
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 brings up the layer selection menu, where you can choose between overlapping 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.
To keep things simple, we hide default values such as 100% opacity or a Normal blend mode.
The Mac app uses the macOS coordinates system, which measures in points. 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. Learn more about measurements in Sketch.
Viewing designs with Grids and Layouts
When you’re viewing a document with the Inspector panel open, you can toggle grid (⇧G) and layout (⇧H) visibility from the zoom menu to give you extra points of reference as you inspect designs.
To do so, select any layer or Artboard, click the Inspect button , then open the Zoom dropdown menu and check or uncheck the Show Grid (⇧G) or Show Layout options (⇧H).
How to toggle grid and layout visibility in the web app
Keep in mind that you can view a grid or layout in the web app, but you can only change their settings in the Mac app.
Inspecting Symbols
When you select 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 from the Inspector.
We’ll always show you the latest version of the Symbol Source, even if you’re viewing an older version of a document.
In this example we select the Symbol from the contextual menu, jump to its Symbol Source and inspect 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 panel. You can head to its Symbol Source from the Symbol card in the Inspector panel, or click on its name or the arrow (→) on the Artboard.
In this case we’re inspecting User Circle, which is a nested Symbol to the Icon 4 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. 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 Artboard you were previously inspecting by pressing your browser’s Back button.
Measuring between layers
Select a layer, then hover over another to display measurements that show the relative distances between them.
When you select a layer, you can display measurements relative to it by hovering over other layers
Copying layer properties
Select a layer, head to the Inspector panel, hover over the property, and click to copy it to your clipboard.
How to copy layer properties from the web app’s Inspector
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 a Layer or Text Style copies the name and path (which Library and group it belongs to) to your clipboard.
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 on 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.
How to view and copy Color Variables values
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 or a 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.
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 a Text Style
When a Layer or Text Style is out of sync with the original one you’ll see the name of the style in italics and a * next to it. We’ll also show you which values are out of sync and what the original values are.
An out-of-sync Text Style in the web app Inspector
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.
How to copy multiple property values in the Inspector
Copying text
Head to the Content section in the Inspector panel, hover over the content and click to copy it to your clipboard.
How to copy content from the web app Inspector
Copying CSS properties
To copy CSS properties to your clipboard for any Layer or Text Style and Symbol, select the component and click on Copy CSS on the top right of the Inspector.
How to copy CSS from the web app Inspector
Design token exports
If your document or Library has Color Variables, Text Styles or Layer Styles, you can automatically generate design token exports in CSS or JSON formats that stay up to date with any changes you make.
To generate a design token export, click the Document Details 
icon on the upper right, then click Export Design Tokens in the Document Details panel. Alternatively, click the 
on the upper right of the toolbar and select Export Design Tokens form the menu.
In addition, you can also generate design token exports from the Components 
view from the sidebar on the bottom left.
How to generate a design token export in the web app
Design token export settings
In the Export Design Tokens modal you have the option to export Color Variables, Layer Styles and Text Styles. Use the drop-down menus to switch between CSS or JSON formats, and color formats (RGB, hex or HSL).
You can download color tokens as either CSS or JSON, but Layer and Text Styles will only work in JSON format.
As you change export settings, you’ll see a preview of the code in the right-hand panel (which you can copy if you want to use it right away).
Once you’re ready to export, click the Download Tokens button to save your design token export locally.
You can only export Layer and Text Styles as design token exports.
Sharing design token exports using a URL
If you want to generate a public URL for your design token exports so that you can, for example, reference them in your development projects, use the drop-down menu to select from three options:
- Enabled for latest document update: Always links to the latest update of the document’s Color Variables, Text and Layer Styles
- Enabled for latest starred version: Always links to the latest starred update of the document. If the document has no starred updates, it will link to the most recent update instead
- Disable link: Any links you shared will no longer work
How to share design token exports using a public URL
Only Editors and Admins can enable or disable links, while Viewers can copy and view any enabled link.
How to integrate design token exports with development projects
You can use public design token export URLs with tools like Storybook to bring in the latest changes, although we don’t recommend adding them directly to a production environment.
Here’s a sample project to show you how you could integrate design token exports 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 their browser, developers can export any assets they need, all from the web app. Anyone with View access will need the Can download and inspect option checked in their document permissions to export assets.
Exporting individual assets
Open a document in the web app and click the Inspect icon . From the Inspector panel, click on any layer to bring up its properties.
Click the Export as button to preview your export and choose the resolution, prefix/suffix and file format. You can add multiple Export options and reset them at any point. Click Export to download the assets.
In this example, the PNG export is available at 1x, 2x and 3x resolution, so these appear together and download in a ZIP file
If you select a layer and expect to see export options but don’t see them in the Inspector, it might be that the exportable layer is hidden behind another layer or within a group. Try Control-clicking on the layer to open the selection menu and look for a layer with the Slice 
icon. This indicates that a layer has export options.
How to export all assets
To export and download assets from the web app, you first need to do the following in the Mac app:
To export all assets in a document, head to the Document Details panel 
and select Export Assets. This will generate a Zip file containing the assets. When your assets are ready, click the Download Assets (ZIP XMB) link that appears to download them.
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.
How to export assets in the web app
Depending on the total size of the assets you’re exporting, you may not be able to download all assets straight away — in which case you’ll receive both an email notification as well as a message in the Updates page to let you know that your assets are ready for download.
