Perfecting the Design to Development Handoff

Across the internet, designers and developers have taken to their keyboards to discuss (and often complain about) the design to development handoff — the point at which design work transitions over to developers to translate into code. There are articles about everything from streamlining the process to bringing A.I. into the mix or eliminating handoff altogether.

As a full-service product agency with a design and development team, we’ve read those articles and consulted many resources as we’ve worked to improve our own design to development process. We haven’t arrived at the magic solution but we do have some ideas to contribute to the conversation.

We sat down with Senior Developer Catherine Parkinson and Senior Product Designer Vinny Custodio to talk about what has been working for us, where there’s still room for improvement and what tools we’ve found to be the most useful to support the process.

Mediacurrent: Vinny, from the designer’s perspective, what are some of the challenges you’ve seen in handing off your work to developers?

Vinny Custodio: One of the biggest challenges, from a design perspective, is communication. It’s important that we, as designers, have an open channel of communication with development and that we try to answer questions as quickly as possible.

We’re always trying to find ways to make sure that annotations or any kind of documentation that we create in Figma is natural for them to use and easy to access.

MC: Catherine, what about as a developer? What are some of the challenges you’ve run into trying to build work that you get from designers?

Catherine Parkinson: I would say one of the biggest challenges is developing for edge cases. So often when clients look at a mockup in a design review, all of the images, photos, text links and content is perfect. When we dive into the development process and start working with content creators, all of a sudden things aren’t perfect and we have to figure out what to do.

So to echo what Vinny was saying about communication, it’s very important when we’re working with these edge cases to be able to talk to the designers to figure out how to solve for these problems.

MC: What are some things both of you have done to smooth the transition from design to development?

VC: We’ve started doing workshops with the development team to make sure that we understand their main pain points with the current handoff process and being open to their suggestions.

We use Figma, and we love it, but it seems like some of the native tools that Figma provides for how to get values for handoff are not very clear so we’re not just relying on that.

CP: One of the ways that we try to smooth the transition process is by reviewing design work as early as possible, to give feedback for anything that we may see as problematic, or maybe a challenge that we’ve worked with in the past that we see as a challenge going forward.

Using a tool like Pattern Lab, Storybook or any type of online style guide can be helpful because we can front load the styles from the design team and they can see everything before we’ve integrated it with the live website.

MC: Could you tell us about a particular project that you worked on where you had to overcome design to development challenges?

VC: There’s a project in development right now for a non-profit recruiting firm where we realized that we had to move away from exclusively using native Figma tools and we needed to bring more documentation into the process.

At first, the development team would ask a lot of questions like “Where can I find the hover state for this button?” or “Where does this button send me when I submit this form?” Once we implemented better annotations on both components and pages, those questions reduced drastically.

CP: There was one recent project that Vinny and I worked on together for a college where we had inherited some of the design files and one of the first things Vinny did was create a very well annotated, well organized global style guide.

There were occasions where, for instance, in a component a type size was one pixel off from another component [and] we could refer to the style guide and see whether that discrepancy was intentional.

Another cool thing on that project: there were a lot of sophisticated, scroll-based animations and Vinny actually used ChatGPT to create some code for that animation so he could show me what he had in mind. That was the first time I’d ever really seen what ChatGPT could do. We haven’t used it on a lot of projects but it was really cool to get a working example outside of Figma.

VC: I’m not saying that designers need to learn how to code, but if you bring CSS values like line height to the conversation with developers, it makes it easier to make sure that the documentation will be followed and everything will look exactly as we want it to.

MC: Catherine, if you were talking to a newer designer, what would you want them to know about transitioning their work to a developer?

CP: I would say that it’s important to think through and communicate how things will look when they aren’t perfect. How will you enforce rules for content? Will you crop thumbnails or truncate text? That way both the client and developers can know ahead of time what to expect when actual content is loaded in and things don’t necessarily fit the design exactly.

Strong annotations also really help move a development process forward. It can help us determine whether or not a difference in design is an actual error or whether it’s an intentional difference. I think having good annotations and a really strong global style guide are really good things for making the design to development transition smooth.

MC: Vinny, if you were talking to a newer developer, what would you want them to know about building a designer’s work?

VC: I would say make sure you know how to inspect work properly [in Figma] and if you find mistakes, you let the designer know so we can either fix it or answer your questions. We try to be as consistent as possible, but mistakes happen. Sometimes styles need to be overridden and we might not have all of the right documentation. Or even with documentation, it’s hard to understand the designer’s intention.

In those cases, it’s usually better just to get on a call and talk it out and fix things in real time.

MC: We talked about Figma and Catherine, you mentioned using ChatGPT and PatternLab, are there any other tools that have been useful in this process?

VC: Yeah, definitely. I can name probably four things that I find myself using often to make things quicker and easier.

I started exploring this Figma plugin called EightShapes Specs that basically generates a full spec sheet for components. It includes all of the variants and boolean properties. It turns hours of work into a click.

There’s also a few style guide generator plugins that I use like Typography Style Guide and Color Style Guide.

I’m also exploring Token Studio to generate tokens for things like spacing and colors. Hopefully Figma will integrate support for tokens in the future but until then, it’s super helpful to have this generated standardization of styles to share directly with a developer.

CP: I think Vinny is actually the person who showed me that there’s a Figma extension for embedding Figma iFrames into Jira tickets. This really helps the handoff process because instead of trying to find where a component is referenced, in what are sometimes very large documents, there’s an embedded iFrame that shows you the exact component you need right on the ticket.

Something we used a lot on a recent project, and I think is super cool from a development standpoint, is CodePen. It can be a great tool for helping communicate with designers and clients, too. It’s really helpful, not just for copying the code, but for seeing, in a live environment, what the expectations are for interaction.

Thanks to Catherine and Vinny for their insights into the process and some of the things we’ve done to improve it. We’re excited to share more about a major way we’re approaching not just the design and development handoff but a new way to approach building websites.

Catherine Parkinson is a Senior Developer at Mediacurrent. She started building websites at age 13 hasn’t stopped.

Vinny Custodio is a Senior Product Designer at Mediacurrent. He recently moved from São Paolo, Brazil to Halifax, Nova Scotia, Canada and is taking recommendations for what winter coat he should buy.