Design in a tool familiar to your traditional vector drawing tool – but export to clean, production-ready code.Start Designing
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.
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.
Add media, color tokens and text styles to your library and use them in an automatically generated CSS Variables 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 Vue.js and all your assets.
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.
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 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.
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.
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 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.
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.
Handoff will be released as an in-browser web app. It'll work on Windows, Mac OS and Linux.