How to set up your design process for smooth developer handoff in Sketch
We speak to five Sketch experts — from freelancers to members of large design teams — to get their tips and advice for streamlining handoff
How do you make sure your developers have everything they need when your design is ready to hand off? At such a critical part of the design process, it’s essential that everything runs smoothly — and that all comes down to the design team prepping their work effectively.
But what can you do to make that happen? We speak to five Sketch experts — from independent agencies to multinational organizations — to get their tips, tricks and advice for making handoff a success.
Clearly define the handoff process
The right team structure is essential to perfecting the handoff process. And while in the past, design and development teams used to exist separately, today the design process is much more collaborative.
And when both sides cross those boundaries, it can make everyone’s life a little easier — as Jenny Nguyen, senior project manager at Spring/Summer explains. “It’s an ongoing process, which starts in the design phase and continues throughout the development,” she says. “As a team, we work close-knit and un-siloed. So we expect our developers to ask questions and suggest design improvements — and to work closely with our designers during the development process to create the final design and user experience.”
Use collaboration tools
But what tools do you need to bring your people together more closely? For the team at the award-winning Framework Design, some recent Sketch updates have offered a solution. “Sketch’s collaboration tools have really helped our handoff process,” the team explains. “It means we don’t have to worry about transferring large or multiple files between teams.”
Freelance designer, developer and educator Andy Bell agrees. Once he realized he no longer needed third-party tools for prototyping, handoff and client feedback, he went all-in on Sketch. “I’ve used Zeplin in the past — especially when working with developers on Windows machines, but these days, my Sketch Workspace and the web app are all I need.”
With Sketch, you can download assets from the web app in multiple formats — and choose to download them individually or all at once.
And when tweaking and updating original files and assets, having a single source of truth that you can share with developers in any browser makes Workspaces an invaluable tool. “If there’s a major change, I’ll duplicate the Symbol or Artboard so the developer can see what’s changed compared to the original. But again, updating the Workspace document and simply sharing a link does the job.”
Bring down barriers between teams
Clearly, developers today can’t just sit around, waiting for designers to hand them the assets they need. They’re now far more involved in the whole creative process — in some cases to help make sure that the designers’ big ideas are realistic.
“Our developers play a key role in the scoping phase to ensure we set the project up for success from a technical point of view,” says Jenny Nguyen from Spring/Summer. “We always aim to include developers early in the design process and for larger design decisions to help us explore and understand both our limitations and possibilities during the design phase.”
At Santander it’s all about teamwork — and as global DesignOps manager, Gonzalo Goyanes explains, designers and developers shouldn’t be separate. “In my opinion, it’s a mistake to consider teams as different entities. When you’re working with Design Systems, communication has to be permanent — and with the two teams sitting at the same table, it makes sense to approach it that way,” he explains. “Before, we needed a whole process and protocol to ‘build’ from design to development. Now the workflow is fully integrated between both specialties.“
Get the right handoff process in place
While your teams may work closely together, there’s a point in the process where your developers need to begin active development. And at that point it’s essential to give them the information and assets they need. “You need to have a defined handover format to follow continuously during the design process — not just at the end of the design phase,” explains Jenny Nguyen from Spring/Summer.
Using Sketch’s web app Inspector, developers can inspect your designs and copy attributes they need — in the format they want — with a click.
The team at creative agency EPM takes a similar approach, with designers looking to get inside the mind of developers — as lead UI designer Dot Falla explains. “Knowing what your developers will need, and taking the precautions ahead of time for a seamless handover is not something you can be taught,” she says. “My best practices have come from putting myself in the developer’s shoes, getting to know them, considering the build and thinking about how the developer will take my design and turn it into a working app.”
This is great for smaller teams, but as the scale of a project grows, so does its team. And that’s where having a common, consistent understanding is key.
“We have common operations or rules known as ‘knowledge management’,“ says Gonzalo Goyanes, explaining Santander’s approach. ”It’s really important to have your library of projects, products and functionalities cataloged, ordered and versioned for future references.”
For the team at Santander, this isn’t just about being able to share more easily. It’s about being able to quickly search for references, or having a vision of the whole history of a product, fast. “Even if you’re efficient, without a well-established knowledge management strategy, you won’t go as fast as you could.”
Do it all with Sketch
While different people and teams have different approaches to handoff, there’s one tool that can help you streamline the process — Sketch.
With Sketch, you have all the tools you need to collaborate throughout the design process
With Sketch, you have all the tools you need to collaborate throughout the design process, get useful feedback from stakeholders, and give developers all the assets and information they need to turn your designs into code. And because it’s all included with a subscription, you don’t need to pay extra for third-party tools.
Find out more about how to make handoff work harder for everyone in our recent blog series.
We’ve heard from some experts, but how do you handle handoff? Let us know what approaches you take on our social media channels, and share your tips and tricks with the rest of the community.
