Improving designer-developer collaboration with big Developer Handoff updates
We’ve given the Inspector in our web app an upgrade, with better support for Design Systems, a speed boost, and a whole host of smaller improvements
Last year, we brought the Inspector to our web app, so developers could check out designs, size up and measure between layers, copy attributes and download production-ready assets. Better still, they could do all of this from their favorite web browser — for free. There’s no need for them to use the Mac app, or pay for third-party tools and plugins to make it happen.
Since we made developer handoff a core feature of the Sketch experience, we’ve seen lots of teams replace third-party apps with this set of built-in features. In fact, in the last 12 months, the number of Artboards you inspect in the web app has doubled to well over 10,000 per day.
Through our internal use and your feedback, we knew that the web Inspector was great for exploring the fundamental layers of a design, but it could be even more useful for exploring the components that come from a Design System. So that’s exactly what we’ve done.
See and select Symbols and sources
Symbols are a bedrock of working consistently, allowing developers to work quickly with a set of common components. And now, we’ll highlight Symbols both on Artboards and in the sidebar whenever you select a layer that belongs to one. This makes it easy for developers to tell if part of a design is based on a reusable component — or something custom that they’ll need to make from scratch.
When you select a layer that’s part of a Symbol, we’ll highlight that Symbol on the Artboard and in the sidebar.
You can always inspect the individual layers of a Symbol in its context, but sometimes it makes sense to take a look at the original Symbol Source. So, you can now click on a Symbol’s highlight on the Artboard, or its card in the sidebar, to see its Source — whether it’s a local to that document or part of another Library document in your Workspace.
Use your browser’s back button to return from a Symbol Source to the previous Artboard.
This is our most-requested improvement to the web app Inspector and we hope it makes a big difference to your workflows.
Supporting Shared Styles and Color Variables
Like Symbols, Shared Styles and Color Variables speed up the design and development process, so we’ve made big improvements to how we expose these in the web Inspector, too. To start, when you select a layer that uses a Text Style or Layer Style, we’ll now show that in the sidebar.
As well as viewing Layer and Text Styles in the sidebar, you can click on their heading to copy their properties.
We’ll also show you if these Shared Styles belong to the current document or another Library, along with their full path. We have some ideas for how we can make Shared Styles support even more useful in the future and we’re hard at work on those right now.
For Color Variables, we’ve also made some improvements to the information you’ll see when you select a layer that uses them. Now (wherever possible), you’ll see the full name of a Color Variable and any group(s) it belongs to. Clicking on it will reveal its color value — and of course, developers can change the format they copy to whichever suits their project.
Color Variables now show more of their names, as we as their location.
And that’s not all…
As we worked on all of the above, we took the time to see if we could improve the web Inspector’s performance. We’ll have another blog post in a few days to dive into how we achieved it all — but for now the big news is that the web app Inspector loads around three times faster than it used to.
The difference is clear when you switch to the Inspector tab in the sidebar while viewing a particularly complex document. But don’t take our word for it, try it for yourself!
We’ve also made it easier to copy attributes and values from the web app Inspector. Now, it’s as simple as clicking anywhere on that value or attribute. You can also click on a section heading to copy all the values and attributes for that section, right to your clipboard.
You can now copy by clicking anywhere on a property, its value, or a heading.
To make inspecting text layers even more useful, we’ll now always show a font’s name in full, and we’ve added the unit px next to font size values. We also now show dash, gap, cap and join style properties for borders. These smaller improvements all add up to a better developer handoff experience in Sketch — and we’ve got more in the pipeline.
We want to make Sketch a home for your entire collaborative design process — and we hope these improvements make it an even better one. With a set of developer handoff tools right inside Sketch, there’s no need to pay for additional apps or integrations. You’ll get them all as part of your subscription, along with features like real-time collaboration and a Workspace to store and share all your documents and Libraries.
