Draw designs and export to code

Design like you would in any traditional vector drawing tool – but export to clean, production-ready code.

Features

The proper way to hand off designs

Stop creating graphical representations of your UI – Start creating the product directly. Handoff works just like the average vector-based design tool, but it gives you production-ready, standard-compliant code with the click of a button.

Reusable components

Create a library of UI elements and piece them together to create reusable components which you can import (or even copy-paste) into your projects.

Manage design system assets

Add media, color swatches and typefaces to your library and use them in an automatically generated global stylesheet for your components.

Drawing freedom

Point and click to draw layers just like you would in Sketch, Figma or any other vector drawing tool. Handoff intelligently infers the hierarchy, order and layout of the elements you're drawing.

Production-ready code

If you're a developer, you can use Handoff as part of your workflow by simply copy-pasting markup and style right into your code editor.

If you're a designer handing off to a developer, you can export your components into a zip file with HTML, CSS, wrappers for React and Vue and all your assets.

Mission

The Handoff Project

With the current landscape of design tools, designers are unable to create accurate representations of digital products, because most of those tools export just static images.

This hinders the communication between designers and developers, which often leads to a pale, misinterpreted design to be implemented. This hurts the quality of products across the web.

We believe a modern design tool should allow a designer to easily create designs that feature states, interactivity and comply with accessibility rules. We also believe that the best way to achieve this is for a design tool to deliver the actual code, so that developers can focus on solving more complex problems, rather than involving themselves in design-specific implementation details.

Frequently asked questions

How does Handoff compare with Webflow?

Webflow and Handoff both allow you to create HTML and CSS without coding. The difference being that Handoff is component-based and device-agnostic, which makes it more suitable for creating a design system, rather than only a website.

Will Handoff be free to use?

During beta, Handoff will be free for an unlimited number of projects. The final launch will be paid, and will include a number of additional features (TBA).

What are your future plans?

Our goal for Handoff is to become a full replacement for traditional drawing tools. More specifically: A tool that gives you the same drawing freedom like Sketch, but which generates standards-compliant, production ready code.

We strongly believe in the 'do one thing, and do it well' philosophy. This is why we first want to focus on improving the 'drawing' experience, after that we'll work on features that solve complex design problems like interactions, accessibility and performance.

In the long-term future, we envision Handoff to be part of an ecosystem of tools that allow you to create digital products without coding.

How does Handoff compare with Sketch?

Sketch is a vector-based drawing tool without capabilities for code export. If you're used to creating designs in Sketch, Handoff will feel very familiar. It uses Layers, Artboards and the Navigator; It gives you the same drawing freedom, but it adds a powerful code export capability.

What does Handoff export?

During beta, Handoff will export to HTML and CSS. Later, we'll add JSX, SCSS and the ability to include boilerplate code for React and Vue.

Does Handoff support states and responsiveness?

Yes, you can specify hover and focus states, transitions and set breakpoints for every screen size.

When will Handoff be released?

We're currently aiming for a beta launch in Q1 2020. Sign up for the beta to get notified when we launch!

What makes Handoff different from other design + code tools?

Most other design + code tools focus on either design, prototyping or both. They are vector-based, so they render shapes on a canvas using absolute coordinates.

The web uses the box model, which is a whole different beast. It requires the output of a design tool to render not only a static design, but also different states, a responsive layout, correct order, hierarchy and to comply with accessibility rules. Vector-based drawing tools simply weren't designed for this.

Handoff is engineered from the ground up to create designs for the web. It's an in-browser tool with a familiar workspace, but it features a layout inference engine to make sure your input respects the workings and limitations of the web.

Which platforms will Handoff support?

Handoff will be released as an in-browser web app. It'll work on Windows, Mac OS and Linux.

Try the future of UI design

Sign up and get early access to the Handoff beta in 2020.

Join the beta