Welcome to Workspaces: Making developer handoff work for everyone
Ready for the next stage of the design process? Here’s how Sketch makes developer handoff simple — without third-party tools
In this series, we’re showing you how to make the most of your Workspace — from organizing designs and staying in sync to sharing them with people inside and outside your Workspace, getting feedback and sending designs for handoff.
In this final post in the series, you’ll learn how to use powerful tools in your Workspace to hand off designs to developers and give them everything they need to turn your designs into a product.
Now that you’ve worked on, shared and tested your design, it’s time for the developers to step in and bring your work to life. This step in the design process can often be challenging — especially when communication is fragmented and developers don’t have everything they need.
Not only can this lead to mismatches between your design and the final implementation, it can also slow things down and ultimately result in a worse product. Thankfully, Sketch includes a full set of handoff tools at no extra cost, so you can collaborate with developers and make this part of the process smooth and straightforward. And best of all, they won’t need the Mac app or any third-party plugins to do it.
Find all the details of a design in the web Inspector
The Inspector tool in the web app makes it easy for developers to examine every element in your design with the level of detail they need. Clicking on any Artboard or layer in the web app will display all the relevant attributes in the Inspector tab — from positioning to Color Variables. Developers can also measure spacing between layers straight from the Artboard, as well as inspect groups that contain several layers or shapes within them.
Control-clicking on any layer will let you explore any overlapping layers.
And because the web Inspector labels every single element in your design, it’s easy to refer to specific parts of the design when giving feedback. If developers have any questions as they work, they can use comments and threads right in the web app to make sure everything’s clear.
With Workspaces, handoff became even more effortless. My favorite parts are how easily I can see the spacing between elements, and how clearly the rest of the information is shown. Copying values is a breeze, and my workflow has picked up speed.
Best of all, developers can use any browser or operating system they like to inspect your designs — all for free, no Mac app required. Add them to your Workspace as Viewers and they can inspect any design, with no need for third-party plugins. And if you’re working with developers outside your Workspace? Simply invite them to your document and give them Viewer permissions. It’s all included at no extra cost.
Copy attributes, Color Variables, and Shared Styles with just one click
We know that during handoff, developers just want the information they need, right at their fingertips. That’s why the web app Inspector makes it simple to copy any attribute’s value to your clipboard — including color codes and text attributes. Just hover over any attribute and click on it.
For layers that have multiple attributes, such as text properties or fills, you can copy them all to your clipboard at once by clicking on the section heading.
When copying colors and Color Variables, developers can choose between different formats to suit their project best. You can also see which group or Library a Color Variable belongs to at a glance, which is handy if you need to refer back to it at some point, or understand its context.
The web app Inspector will save your preferences, so copying a different color attribute will use the same format as your original selection.
When you select a layer that uses a Text Style or Layer Style, we’ll show it in the sidebar along with their full path, making it clear whether that style belongs to the document or a Workspace Library.
Inspect Symbols in detail
Symbols are not just a time-saving tool for designers, developers benefit from them too. We’ll highlight Symbols both on Artboards and in the sidebar any time you select a layer that’s part of a Symbol. This way, it’s easy for developers to distinguish between elements that are based on reusable components and those that are custom and will probably take them a little bit more time to make.
While sometimes it’s helpful to have the full picture, other times developers might need to inspect the Source Symbol in detail. Click on the Symbol’s name or arrow icon (→) on the Artboard, or on the card in the Inspector, no matter if it’s local to the document or part of a Library in your Workspace.
Quickly access a Source Symbol to explore it in detail.
Download production-ready assets with a click
While inspecting is a key part of the handoff process, it’s just as important to give your devs the images and icons they need. With Sketch, you can mark assets as exportable in the Mac app, and they’ll be ready for your devs to download in a click.
Plus, they’ll always have access to the most up-to-date version of assets — and know where to go if they need something specific. Developers can choose between downloading individual assets or all of the assets in a document, as well as choosing the file format that works best for them.
You can download assets in multiple formats and choose to download them individually or all at once.
Well, that’s the final post in our Welcome to Workspaces series. Thanks for joining us as we explored the tools in Sketch that improve collaboration across the design process — we hope you found some useful tips and advice here. Stay tuned to the blog for more news on Workspaces in the coming weeks.
