Design-to-code

Learn about the essentials of engineering handoff: what it is, the benefits of engineering handoff, engineering handoff best practices, and more.

What is meant by “design-to-code?”

Engineering handoff, design handoff, developer handoff, or simply design-to-code, are all terms used to describe the workflow of handing off design specs and assets to engineers.

While we can’t literally convert a mockup to a finished app or website, design-to-code refers to the process of using engineering handoff tools to extract the styles, fonts, and image assets from a design file. These specs are then neatly communicated to engineers, making it easy for them to begin developing.

How have we converted design-to-code historically?

In the past, design-to-code was a stressful, mind-numbing experience.

For designers, it meant writing out specs manually—either in a text file, or as layers in a Photoshop document—which was frustrating enough. And that’s before considering the fact that written documentation had to be amended if last-minute changes were made.

For engineers, it meant constantly reaching out to designers for further clarification. Because with that much documentation, there were often discrepancies, inconsistencies, or things that just didn’t make any sense. With smaller teams, it meant handing over PSD files directly to the developer and hoping for the best.

For project managers dealing with budgets, it sometimes meant enlisting the help of specialized services like PSD2HTML. Due to the time-consuming and error-prone nature of the engineering handoff process, these “pixel-perfect” PSD-to-HTML services were in high demand, and sometimes very expensive.

Engineering handoff tools have not only changed the way designers and developers collaborate, but helped them recognize each other as allies—not enemies.

Why engineering handoff is better today

Engineering handoff has made great strides due to the development of specialized tools built to:

• Inspect and document the styles used by every layer in a design file.
• Display the code equivalent in a variety of languages (CSS, Swift, Android).
• Enable communication in the event of confusion or design inconsistency.
• Enable feedback to make handoff tools even more useful to product teams.

Engineering handoff tools

Design-to-code features come in two flavors:

1. Standalone tools dedicated to engineering handoff.
2. Complete product design platforms with added engineering handoff features that enable a smoother workflow.

The main benefit of using a complete product design platform is having design-to-code features alongside ideation tools, prototyping tools, project management tools, and so on. In other words: everything in a single, convenient subscription.

Dedicated engineering handoff tools include:

• Zeplin
• Avocode
• Sympli

Product design platforms with engineering handoff features include:

• Inspect by InVision
• Handoff by Marvel
• Developer Handoff by Figma

Engineering handoff best practices

While engineering handoff tools take a bulk of the work, there are still a number of considerations that designers must consider—not only before the handoff itself, but prior to starting a new design project. Failure to think ahead can cause a lot of confusion and headache for product teams further down the line.

Design @1x
Designing at a scale other than @1x can quickly become very confusing. For example, if we design @2x but wanted to export @1x assets, we’d actually need to export @0.5x. For @3x we’d need to export @1.5x. Confused yet? Us too.

Design @1x for minimal confusion.

Export images as SVG
On the web, SVG is king. It’s a vector format that’s resolution-independent, which means a single export will gracefully scale to any size. Choosing SVG over bitmap formats makes things easier for engineers and will result in a smaller file size. (Note that in order to export images as SVG, the image must not contain any bitmap-like qualities such as textures or photographic elements.)

Include @1x, @2x, and @3x assets
For bitmap images (or mobile app designs where SVG suffers from terrible performance issues) it’s best to export @1x, @2x, and @3x PNG assets (or JPG for larger, non-transparent images). This will allow engineers to extract image assets at whichever resolution they need.

Stay organized
It’s best practice to rename layers so that engineers can easily read the specs. This especially applies to image assets, as the engineer will require clear, descriptive file names for each asset in order to implement them into the codebase. If every layer is called Rectangle 328472, this doesn’t bode well for readability or maintainability.

Create a design system
A design system is a shared, centralized embodiment of flexible and reusable UI components that can be used to assemble new ideas and concepts. Design systems are based on clear standards of typography, colors, imagery, and visual hierarchy.

Creating a design system not only provides a consistent style guide, but implies that these styles have been tried and tested in a real environment, often by various designers potentially working on different products within the company. Maintaining consistency is extremely important for engineering handoff because conflicting styles and measurements can result in bloated, unnecessary code. It’s also confusing for the end user trying to understand a messy visual hierarchy.

Don’t fumble the handoff

Engineering handoff can be one of the most frustrating and complicated aspects of design collaboration. But with Inspect, the process becomes smoother, clearer, and faster. Design collaboration with Inspect is also one of the best opportunities for designers and engineers to strengthen their bonds as collaborators.