Learn how developers can inspect your designs and export assets in our web app — no Mac required.
With the web Inspector, you can select and measure between layers on Artboards, view layer attributes, and copy values to your clipboard. The web Inspector is available for all members (Editors and Viewers) in a shared Workspace by default. For documents you upload to your My Drafts folder, you can enable the web Inspector for anyone you share them with from the Document Settings menu.
To use the web Inspector, make sure you are viewing an individual Artboard, then click on the Inspect tab in the sidebar. You’ll see attributes for that Artboard, including its dimensions, a background color (if applied) and any layout settings. This is the default view when you have not selected a layer.
How to inspect layers
Select the Inspect tab in the sidebar, then click on any layer. 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.
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, 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 copy layer attributes
To copy an individual attribute in the web Inspector, hover over it and click on the copy icon that appears next to it. 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%
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 colors and Color Variables
To copy a color value to your clipboard, hover over it and click the copy icon that appears next to it. To change the format (to Obj-C or Swift, for example), click on the arrow next to the copy icon and pick the format you need from the list.
To view and copy values for Color Variables or gradients, you’ll need to click on their name first. You can also copy a Color Variable or gradient’s name and value together, by clicking on the copy icon next to the name.
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 Inspector will save your preference and copying a different color attribute will use the same format as your original selection.
Note: At this time, Tints are not available in the web 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 the copy icon that appears. This will copy all of the values related to that specific attribute for the layer you’ve selected.
As well as being able to inspect documents in the web app, anyone with access to a document can now download assets that are set as exportable. 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.
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 web app Inspector 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, 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.
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 none of the layers, Artboards or groups in your Sketch document are exportable, or it doesn’t contain any slices , you won’t be able to use the Export Assets feature for that document in the web app. 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 for it.