Introducing Handoff Live Components – instantly publish components on sites and web apps.
Join the waitlist

Design and build UIs.
Without writing code.

Hero Home Heading

Handoff is a design tool that allows you to visually create user interfaces and export to HTML, CSS and Vue code.

A Handoff Designer User Interface with an animation that shows how Handoff works.
How it works

Design to code.
The modern way.

Handoff gives designers and developers an extensive design tool that allows them to design and build UIs simultaneously. A tool that feels design, but breathes code. An all new way for both teams to jump in on the action, and create great digital products – together.

1. Import designs from Figma

Hit the ground running by copy-pasting your designs from Figma into Handoff.

2. Author and edit UIs

Drag and drop elements and style them as you wish. Use tactile tools to resize, position and add spacing.

3. Export to code

Integrate the UI into your codebase by copy-pasting markup and styling – or by exporting to full-fledged Vue components.

"With Handoff, I have tripled my added value as a UI designer. Because now I don't just deliver a visual idea – I deliver a full-fledged prototype, code included. In fact, I am now the engineering teams' head start on their way to a working product."
Portrait photo of Bianca Marcela's testimonial
Bianca Marcela
UI designer
Features

The best way to create
pixel perfect working designs

Stop creating pixel perfect visual representations of your UI – Start creating the real thing! Handoff feels familiar to traditional design tools, but it’s jam-packed with features for an iterative design-to-development handoff.

Reusable components
Responsiveness
Design tokens

Choose from a library of 35+ pre-built UI elements, including native web elements like headings, input fields and buttons. Piece them together to create reusable components and import or copy-paste them into your codebase in your language of choice.

From portrait phones to large desktops, quickly optimise your UI for all devices. Drag the viewport to preview what it looks like on various devices and hand off native CSS media queries for your developers to implement.

Keep your designs and codebases in sync by assigning reusable tokens for colours and text styles. Design tokens export to native CSS variables.

Vanilla HTML & CSS

Export to full-page HTML/CSS or copy-paste it from the Designer.

Vue.js

Export components to Vue.js Single File Components.

React Soon

Export components to React JSX with CSS Modules.

Tailwind Soon

Export to Tailwind classes with a custom Tailwind config file.

Try the future of UI Design

Sign up to start designing + exporting to code today

Handoff is no longer in active development

Due to challenges with finding product-market fit, we've unfortunately had to decide to quit working on Handoff. You're welcome to play around with Handoff, but please note that access is provided on a best-effort basis, and that the product may eventually be taken offline.