We've launched the Handoff Public Alpha Preview.
Release notes

Create designs and export to code

Design in a tool familiar to your traditional vector drawing tool – but export to clean, production-ready code.

Start Designing
Handoff Alpha Preview – Chrome Desktop only
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, standards-compliant code with the click of a button.

Reusable components

Choose from a library of 35+ pre-built UI elements and slice or 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 tokens and text styles to your library and use them in an automatically generated CSS Variables stylesheet for your components.

Design freedom

Work with layers similarly to how you would in Sketch, Figma or any other traditional design tool. Handoff allows you to easily resize, drag and drop elements onto your components and screens.

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 Vue.js 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. Handoff focuses on making it easy to design and build a components-based design system, as well as providing a code export that integrates well with typical software development cycles. Webflow on the other hand, is mostly used as end-to-end website publishing platform, with less focus on components and code export.

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 fill in the gap that exists between traditional drawing tools and IDEs. More specifically: A tool that gives you  the same design freedom as Figma, 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 design experience, after that we'll work on features that solve complex design problems like interactions and accessibility.

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 and Figma?

Sketch and Figma are vector-based drawing tools without capabilities for full code export. If you're used to creating designs in Sketch or Figma, Handoff will feel very familiar. It uses Layers, Artboards and the Navigator; It gives you the same design 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 in Public Alpha. This means Handoff is open for anyone to use. During the Alpha, we continue to develop towards beta and the stable 1.0 versions.

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 makes 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 to start designing + exporting to code today.

Start Designing
Handoff Alpha Preview – Chrome Desktop only