Design like you would in any traditional vector drawing tool – but export to clean, production-ready code.
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.
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.
Add media, color swatches and typefaces to your library and use them in an automatically generated global stylesheet for your components.
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.
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.
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.
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).
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 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.
Sketch is a vector-based drawing tool without capabilities for full 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.
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.
Yes, you can specify hover and focus states, transitions and set breakpoints for every screen size.
We're currently aiming for a beta launch in 2020. Sign up for the beta to get notified when we launch!
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.
Handoff will be released as an in-browser web app. It'll work on Windows, Mac OS and Linux.
Sign up and get early access to the Handoff beta in 2020.Join the beta