Frequently asked questions

Everything you need to know about Handoff

General

How does Handoff compare to 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.

How does Handoff compare to Sketch/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 are you 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 it works

How do I integrate Handoff code exports into our codebase?

Broadly speaking, there's two ways to integrate Handoff's code into your codebase. You can use it by copy-pasting the markup and styling, or you can import the components as a UI library into your codebase. For most projects, the latter is the preferred way, because unlike simply copy-pasting the code, it prevents the code into your codebase from diverging from Handoff, and as such allows you to keep using Handoff as part of an iterative development workflow.

Does Handoff require knowledge of HTML or CSS?

Handoff promotes a workflow that allows even the less web-savyy designers to build upon the work that the developers have done in creating the initial skeleton UI in Handoff. So the lack of HTML/CSS knowledge is usually not a problem. However, the adaptive nature of layouts on the web does mean that working on layout and positioning may feel a bit challenging, especially when compared to tools like Sketch or Figma.

I want Handoff to support [x] framework/language, what can I do?

If you'd like to see Handoff export to another language or framework that is currently not on our roadmap, we welcome you to reach out to discuss options to collaborate.

Adoption

Is Handoff a Figma/Sketch/XD replacement?

No, Handoff is not meant to replace vector-based design tools. For most projects, designers will need the explorative freedom of vector-based tools to work on the initial 'rough idea' for a project. However, as designers get more comfortable with Handoff, they may prefer to go directly from wireframe to building out the components and compositions in Handoff.

What are the benefits for designers?

- Designers have the ability to design in a tool that respects the boundaries of the web, making it way easier and faster build something that is ready to be implemented by developers, because unlike traditional design images, Handoff exports include the full markup, styling, including properties like responsiveness, states and assets.

- Designers also save a lot of time because they don't need to create throwaway prototypes anymore, because most of the interactivity (such as *page links*, *hovers*, *transitions*) will be part of what's being built and exported with Handoff.

- Designers don't need to manually prepare .zip files with assets, or sheets with colour variables, as this is also part of the export.

- Designers exert a high level of control over how the UI is implemented in the product, which reduces the number of development cycles that are needed to reach the level of fidelity for the product to be put live.

What are the benefits for developers?

- Developers save a lot of time converting the designs to code, because the Handoff export contains the markup, styling and JS boilerplate, ready to integrate into the codebase.

- Even if developers are only using the Handoff export as a reference, it contains all the nitty-gritty details about a design, such as adaptive layouts, responsive styles, hover states and assets.

- Developers don't need to recreate common UI patterns in code, like *Buttons* or *Accordions,* because Handoff contains a pre-built UI library of over 35 solid UI elements.

What platforms does Handoff support?

Handoff works as an in-browser web app. It'll work on Windows, Mac OS and Linux. For now, Handoff supports Chrome browsers only, because limited resources force us to focus on getting the product right, before we spend time on compatibility with other browsers.

Other

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, which are projected to be released in 2022.

Connect with 100+ design-to-code enthusiasts

Join the founders of Handoff and other design to code enthusiasts on the Handoff Discord.

Join Discord

Try the future of UI Design

Sign up to start designing + exporting to code today