In a typical web development workflow, designs are created in vector-based tools like Figma or Sketch, and handed off **as images or prototypes to the development team. Developers then implement designs and sprinkle in additional code, such as APIs, interactions and business logic as necessary.
With Handoff, the process of designing and building UIs happens simultaneously.
This is quite a different approach to web development, so this raises questions about how teams should adopt Handoff. Below you can find a typical workflow to give you an idea about how to introduce Handoff into your workflow.
Before (Traditional)
Designers create paper mockup or wireframe
Designers create high-fidelity designs (in vector tools like Figma or Sketch)
Designers create an interactive prototype
Designers prepare assets (e.g. images, colours)
Developers implement UI code (e.g. markup and styling)
After (Using Handoff)
Designers create paper mockup or wireframe
Designers create high-fidelity designs (in vector tools like Figma or Sketch)
Developers build out the v1 skeleton UI in Handoff.
Designers make changes in Handoff to match the full design.
Developers export the code and integrate it into the codebase.
Developers implement APIs, business logic etc.
Developers deploy a new release
In the proposed workflow above, developers start off by building the v1 in Handoff. This gives them a quick skeleton, just enough to be able to wire up the UI to the functionality from the code. This allows developers to already start working on more complex stuff, such as implementing the APIs and business logic. In parallel to this, designers continue to work in Handoff to build out the v1 into a full-fledged design. During this process, developers can regularly pull in the updated Handoff code into their codebase, iteratively working towards the final product.
As teams get more comfortable with working in Handoff, designers can start do more significant and complex authoring, not relying on the developers to do the v1, but building the initial UIs themselves. This gives them a high level of control over how the design is implemented, while freeing up the developers to work on more complex parts of the product.
As you can see, Handoff breaks down the barriers that traditionally exist between design and development teams, making room for new ways of working together and eliminating much of the back-and-forth that currently exists in software development workflows.