How to get started with developer handoff in Sketch
Invite developers to your Workspace for free — and instantly give them all the tools they need for handoff in one place
When it’s time to turn pixels into code, Sketch includes all the tools your developers need to make your product a reality. They can inspect and measure designs in any browser, on any operating system. Plus, they can download production-ready assets in a click, grab color values in whatever format they use, and more.
Best of all, you can invite as many developers as you want for free — no Mac app or third-party plugins needed.
Let’s get started.
Welcome to developer handoff in Sketch
Today, Sketch is a platform for your entire creative process — and developer handoff is a huge part of that. So we wanted to make it simple for you to invite developers to view your designs in any browser.
And because it’s all included with your subscription, you don’t need to pay extra for third-party tools. All you need is Sketch.
Invite your developers (for free)
The first thing you should do before you handoff your design to your developers is make sure you’ve invited them to your Workspace. Remember — you can invite them for free.
You can add as many Viewers and Guests to your Workspace as you like — for free.
You can invite as many people to your Workspace as you like — find out how in our documentation. If they’re a developer — who only needs to view or inspect your designs, download assets and leave feedback, you can invite them as a Viewer or a Guest. Viewers and Guests in your Workspace are completely free, and they can inspect your documents in any browser, on any operating system. All they need is an invite to your Workspace.
If they’re someone who needs access to the Mac app — like a designer — you can add them as an Editor, which will count towards your Sketch bill.
Prepare your documents for developer handoff in Sketch
Now that you’ve got the right people involved, it’s time to prepare your files for handoff. And there are a couple of things designers can do to make life easier for developers later.
Make assets exportable
If you’ve used elements in your designs — such as images or icons — that might be tricky for your developer to reproduce in code, you can make them exportable in the Mac app.
You can choose the size and format of any assets you want to make exportable, giving developers more choice when they come to use them.
When you make an asset exportable, you choose the scale and format (such as JPG, PNG, SVG etc) in which people can use those assets. A developer can then download them from the web app with a click. But more on that in a bit.
Embed fonts in your document
By embedding fonts in your document, you can guarantee that your design will render perfectly in the web app, and your developers will see your work exactly as you intended it. Which should avoid delays in the development process.
Developer handoff in the Sketch web app
So your document is ready and your developers are in. In the web app, they have all the tools they need to view Artboards and inspect documents in more detail. Let’s see how.
View documents, test prototypes and add comments
Once you’ve added a developer as a Viewer in your Workspace, they’ll be able to see all your documents. Any Viewer in your Workspace can open documents to see all the Artboards within it, and click one to inspect it.
If you’ve created a prototype for a particular design, you can also open and click through it to see the layouts in context. If you want to jump to a specific Artboard to inspect it in more detail, you can do it with a click.
When you open a prototype in the web app, you can then jump straight to the Artboard you’re testing to inspect it in more detail, or offer feedback.
Once you’re there, you can add comments and feedback, and even tag specific people if you want to get their attention. This is perfect when developers need to ask questions or need clarity around your design.
Inspect specific elements of a design
Once developers are ready to start inspecting, all they need to do is select the Inspect tab in the sidebar. Now they can select specific layers on the Artboard itself to get more information, measure distances between layers, and copy attribute information.
When there are multiple overlapping layers, a quick Ctrl-click will let them choose the layer they want to inspect. And they can measure spacing between layers by simply moving their cursor around the Artboard.
Select precisely the layer you need with a Crtl-click, then move your cursor to measure spacing between layers.
In the sidebar, they can get more information about the layer. From position and alignment, to colors and borders, they can see all the attributes in one place. And if they want to use them in code, they can easily copy any entry with a click.
When selecting colors, developers can even choose the format they want to copy the color information in. So whether you’re developing in Swift or just want to grab the RGB values, we’ve got you covered.
Symbols, Color Variables and Styles
If your document uses Symbols, Color Variables or Styles, you’ll find them in the Inspector in the web app, too.
If your developers need to see a Symbol’s original Source, they can jump to it with a click, and inspect it there. And if the Component lives in a Library in your Workspace — or a Library that’s shared with you — you can jump straight to that Library, too. This is really useful if you’re working with a Library that’s matched with code in your design system, as it’ll instantly tell your developer which standard component to use.
If your Symbol comes from a Library that’s in your Workspace or shared with you, you can jump to it with a click and inspect it right in the web app.
Of course, if there are elements in your design, such as icons, that aren’t included in the Library or design system, it’s not a problem. Because you made them Exportable in the Mac app, your developers can download any of these elements with a click.
It’s easy to download individual assets in your design by selecting them on the Artboard and downloading them in the size and format you need at the bottom of the Inspector. But you can also download every exportable element in a design in one go by navigating to the document overview and choosing Export Assets.
When you click Export Assets, the web app will create a ZIP file with all the document’s assets included. You’ll see a notification when it’s ready, so you can download everything with a click.
Developer handoff in Sketch — there’s more to come
This is all available right now with your Sketch subscription — with no third-party tools required. But we still have big plans to improve developer handoff in Sketch in the future. Soon it’ll be easier than ever to manage your design system from your Workspace.
Stay tuned for more news on that (and a new Canvas view in the web app) soon. For now, we hope you enjoy using our powerful developer handoff features.
