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.
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.
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.
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.
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:
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.
The formats you can choose from are:
- 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.
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.
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.
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.
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 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.
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.