Designers have done their job by creating stunning designs and user interfaces (UI). Now is the time to share these designs, created in the Sketch app, with the development team.
Let’s understand how we easily share this with the team using browser-based developer handoff tools in Sketch.
Now, designers can invite developers to inspect designs in their workspace for free. Their design files are opened in browsers before the developers in the ‘view’ mode. They don’t even need the Mac app (or a Mac), as it all happens in a web browser.
All workspace members can inspect documents. As per the given options, designers can grant access to view, “can download and inspect,” or “Can comment” only.
Table of Contents
Start Developer Handoff with Inspecting layers
The ‘viewer’ can inspect a shared design by clicking the Inspect icon in the toolbar to open up the Inspector.
Afterwards, you can select any layer on the canvas to view its properties and measurements.
You can select an overlapping layer by control-clicking over the layer and choosing it from the contextual menu. The Inspector panel will display properties of the selected layer.
Here, it must be noted that the properties and values will vary depending on the type of layer you select.
For selecting the text layer, you will see values like “Typeface, Weight, Size, Letter Spacing, Transform, Color,” and so on in the Inspector panel.
Whereas for selecting the border layer, you will see values like “Radius, Style, Size, border color, size,” and so on in the Inspector panel.
Copying shared Styles
During the developer handoff process, while selecting a Text layer, you may encounter an error saying that “Text Style(s) out of sync” and the style name will appear in “Italics” suffixed with “*”. The style panel also shows the full path of the shared style, whether it belongs to your current document or another library.
Viewing designs with Grids and Layouts
While inspecting the designs, developers can toggle grid and layout from the zoom-out icon, located at left-bottom.
Inspecting Symbols
In case of inspecting symbols, there are some added features here. Developers can select a layer that belongs to a symbol; the symbol on the artwork gets highlighted, and a card containing all elements in the layer gets listed. You can then select the symbol’s name from the contextual menu.
Also, you can select the symbol directly by control-clicking on the layer; it will measure the distance from other layers. If the symbol belongs to the current document’s library, then you can jump to its symbol source.
Measuring between layers
Select a layer, then hover over another to display measurements that show the relative distances between them.
Copying colors and Color Variables
You can copy the color value to your clipboard by clicking the color label.
Also, you can pick your preferred color format, like HEX, RGB, HSL, NSColor (Objective-C and Swift), and UIColor (Objective-C and Swift), from the list that appears by clicking the arrow next to the current value.
Copying multiple property values
You can also 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, as shown in the box below.
opacity: 1;
color: rgba(34, 34, 34, 1);
font-family: "Lato-Bold";
font-size: 16px;
font-weight: 700;
font-style: Bold;
letter-spacing: 1px;
text-align: left;Copying text
Developers can select and copy the textual content from the designs. To achieve this, you have to select the layer and head to the content section in the inspector panel. Afterwards, hover over the content and click it to copy to your clipboard.
Design token exports
You can also export design tokens for your designs through Sketch. With the library assets like Color variables, text styles, or styles, you can automatically generate design token exports in CSS or JSON formats that stay up to date with any changes you make in your design.
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 on the upper right of the toolbar and select Export Design Tokens from the menu.
While exporting design tokens, you can add some more details, like token types as color variables, layer styles, and text styles. file format, color code.
Then you can define the design token file format in which you want to export.
Later, you can choose the color code type to be exported.
In addition, you can also generate design token exports from the Components view from the sidebar on the bottom left.
Exporting assets
Along with getting design tokens and inspecting elements in the browser, developers can export any assets they need from the designs through the browser. Here, designers have to verify that when they are giving ‘View’ access to them, the Can download and inspect option is checked in their document permissions. You can open the shared document in the browser.
- Select Design to share
- Go to the inspect icon
- Choose ‘Export as…’
4. This is the dialog to export the design assets. It shows design size, at top-left corner, asset format type like PNG, at top-right corner.
5. Design size can be set using the size drop-down list.
6. You can add suffixes to these assets.
7. And last option is for defining file format like PNG, JPG, etc.
It should be noted here that you may have a downloading issue if the total size of the assets is quite large. You may not download them straight away. In that case, you will receive both an email notification as well as a message on the Updates page to let you know that your assets are ready for download.