Developer Handoff

What is developer handoff?

This is the stage when the UI is at a point where the developer can finally start implementing it in code. To ensure that this process goes off smoothly, there are some important things you can keep in mind.

Design Systems

Having a design system is not only beneficial for designers but it is also useful for developers. A design system not only adds more consistency to the overall product but it will also make it easier to collaborate.

Naming Conventions

Making sure that all the components have apt names would make naming the components in code easier for the developer. This will make your project organised as well as easier to navigate through.

Being on the same page

Communication is probably the most important thing and it is essential that the developer and the designer communicate in the right way. This is necessary when the design has some complex elements that might be hard to translate into code. Talking these things through is the best option.

Handoff Tools

Most of the design tools present today try their best to implement features that make the design handoff much more easier and faster. Let's discuss some of these.

Sketch Cloud Inspector

Sketch has Cloud Inspector, which is a free tool that helps developers easily inspect any Sketch document in the cloud. Sketch has written a blog post introducing this feature. It explains its functioning in detail.

Figma Developer Handoff

Figma has a guide where they explain how to handoff different assets to developers.

Coediting in Adobe XD

Coediting is a new feature from Adobe XD. It allows you to share and review files, share specs of your designs and easily hand off the assets to developers.

Zeplin

Zeplin is one of the most popular tools to share different design assets with the development team. It has integrations for Figma, Sketch and XD.

Sympli

Sympli is another well known tool. It also has integrations for Sketch, Figma, XD and even Photoshop.

Abstract

Another interesting tool for developer handoff is Abstract. If you are already using Abstract as a design versioning tool, this can be a good option.

Copy your asset as SVG in Figma

For this example, we will use a button from our UI. We will copy the SVG code from Figma, and we will paste the code in Codepen. The first thing we will do is open our Figma file and make sure that all the layers are inside a Frame.

As a next step, we will delete all the different effects from the frame, like shadows and drop shadows. So we can make sure that we have a clean code. Once our frames is clean , right click on the frame and go to Copy/Paste > Copy as SVG.

Then let's go to codepen.io. Here, paste the button's code. As you will notice, the button looks exactly as we designed it on Figma. This is a handy feature for developers since they can easily copy any asset and paste them in their projects

Conclusion

Design handoff stage is an integral part of any project. Communication plays a major role while implementing any design into code. You can utilize any of the above mentioned tools to facilitate this process.