Design in a tool familiar to your 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.
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.
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 design 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 design 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 2021. 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 2021.Join the beta