When an organization keeps design and engineering in separate verticals, communication is key. The process of “handoff” between designers and developers can be a contentious topic in the software world. When Spreetail's design team started noticing a decline in the quality of implemented designs, I began investigating.

The rapid growth of Spreetail in the years between 2019 and 2022 meant that a lot of engineers hadn’t had much exposure to the design team or our processes. Writing exhaustive documentation is always an option, but rule number one of UX writing is that ”nobody reads your shit.” Suffice to say, that couldn’t be my end-all-be-all solution.

One of my first observations in researching this problem space was that the best design/develop relationships existed where the “handoff” between roles took longer. The places where it was less of a discrete moment, and more of a relationship. The more time spent involving the developer in the design process and vice versa, the better the resulting product was. In a fast-paced environment like Spreetail, time was at a premium.

My solution came as a piece of software to generate the structure and frames for a unified “handoff” procedure. By allowing the designer to structure their mockups for fast communication, I ensured that any developer would be able to understand and begin work, even if they weren’t involved much in the design process.

Developed over the course of a month, the Handoff plugin creates several flows on the Figma canvas, populated with frames that the designer selects. Designers can title each flow to describe the enclosed process. Each flow has a “state” tag, telling any collaborators exactly how far along the designs are. Above the flows is a short “readme” card, containing info about the design task, the outcomes, and the responsible designer. All this enables consistent presentations of designs and helps ease the learning of Figma’s own native handoff utilities.

I developed the Handoff plugin using typescript and Figma’s native API. The React Styled-Components library was also used to style the interactive UI modal.

After two years of company-wide use, my Handoff plugin has set a standard for developer communication in Figma.