Everything you need to know about Handoff
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.
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.
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.
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.
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.
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.
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.
- 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.
- 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.
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.
Join the founders of Handoff and other design to code enthusiasts on the Handoff Discord.
Join DiscordSign up to start designing + exporting to code today