With our handoff tools, any developer can grab the information they need, for any part of a design, at any time. Inspecting designs is free, and you don’t need a Mac. In this section, you’ll find out how to use the Inspector tool to measure the space between layers on Artboards, view layer attributes, and copy values to your clipboard.
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.
Accessing the Inspector tab in the web app (July 2022).
All members of a Workspace (Editors and Viewers) 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.
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.
Toggling layout visibility of the grid and layout in the web app (July 2022).
Right now, you can only change a document’s Grid or Layout settings in the Mac app.
Inspecting 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 (July 2022).
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.
Copy the cap style values of a layer with borders in the web app (July 2022).
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.
Inspecting 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 Cell - Hotel With Ratings from the contextual menu, jumping to its Symbol Source and inspecting it in detail (July 2022).
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, hotel is a Nested Symbol to the Symbol Header — we are just selecting and inspecting the Nested Symbol (July 2022)
Note: 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 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.
Measuring between layers
Select a layer on your Artboard and 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 (July 2022)
Copying 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 layer attributes (July 2022)
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.
Copying 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 (July 2022).
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.
Inspecting and copying 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.
Copying a Text Style (July 2022)
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.
Copying 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 group of attributes for the layer you’ve selected.
Copying multiple attribute values (July 2022)
Copying text
To copy text to your clipboard, head to the Content section in the Inspector, hover over the copy and click on it.
Copying content (July 2022)
Copying 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.
Copying CSS (July 2022)
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 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 About tab of 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.
Creating and sharing Color Tokens (July 2022)
Note: Only Editors and Admins can enable or disable links. However, Viewers can copy any link that is already enabled.
Integrating 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 as they have the “Can download and inspect” option checked in their document permissions. The asset export process only takes place when someone requests it and 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, 2x and 3x resolution, so these appear together and download in a ZIP file (July 2022).
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 
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 link at the end of the content in the right sidebar, under the About tab. This will generate a Zip file containing the assets. When your assets are ready, click on the Download Assets (ZIP XMB) link that appears to download them.
There may be a short wait for the assets to process before you can download them, depending on their size (July 2022).
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.