Overview

Handoff is set of open-source, end-to-end workflow tools for design and development teams looking to streamline their use of Figma design systems.

What is Handoff?

At its core, Handoff consists of tools for managing, extracting, and documenting design tokens from Figma. It aims to encourage a separation of concerns, and be easy for beginners, flexible for advanced users, and fully automatable.

Designers can focus on their design, rather than managing tokens or their naming structure upfront, and use the Figma plugin to group and annotate their design decisions as needed. Technical teams can then leverage the CLI tool to extract those decisions as tokens, ensuring that they adhere to the required naming specifications. Additionally, generating a static documentation site is straightforward, helping teams understand the design system and how to use it effectively.

This end-to-end process significantly reduces the effort of keeping Figma designs and code in sync across brands, websites and apps even as they change.

Main Features


Figma Plugin	Allows designers to annotate their design decisions in Figma
Handoff CLI	The core tool for extracting tokens from a prepared Figma File
	- Foundation tokens and assets
	- Component tokens
SASS Transformer	Transforms exported tokens to SASS Variables
CSS Transformer	Transforms exported tokens to CSS Variables
Style Dictionary Transformer	Transforms exported tokens to AWS Style Dictionary JSON
Bootstrap Preview Generator	Creates a preview of your tokens using Bootstrap templates
Static Site Generator	Creates a customizable static documentation site

Who is Handoff For?

For Designers

Let developers know which components are ready to be used, and which attributes should be extracted from which layer.
Be able to iterate on your designs freely, and have the changes communicated easily.
Avoid committing to elaborate token or variable naming schemes before you design.
All your work is saved with the component in Figma, and follows the component if it gets moved, duplicated or copied.
Have a customizable design documentation site with previews of how your developed components look and act on the web.

For Developers

Automatically pull all the correct styling attributes, icons and logos out of a Figma design.
Avoid spending hours chasing down the latest design tweaks.
Quickly get a ready-to-use, customizable documentation site up and running, so everyone has a common reference.
Fully automate your workflow by having design updates create pull requests via CI/CD.

For Organizations

Ensure that your brand is consistently applied across all your digital properties.
Improve efficiency of your design and development teams by avoiding the unnecessary back-and-forth of design decisions and changes.
Avoid extra costs and proprietary lock-in by using open-source tools and standards.

Who made Handoff?

Handoff is a tool we use internally for our day-to-day projects at Convertiv. In our experience, design systems and design tokens greatly increase productivity, although they sometimes require additional complexity to make everything work just right. We’ve decided to publish our tools as open-source to help other teams embrace the revolution. We're constantly building new features and expanding what it can do. We’d love to chat if you have a use case that hasn’t quite been met.

How to use these docs?

You can navigate through the sections using the sidebar on the left. If you're looking for something specific, you can use the search bar at the top of the page. These documents require some prerequisite knowledge, like how to use Figma or the command line. You will also need to be familiar with general concepts of design systems, tokens and components. To kick things off, we recommend you dive right in with the Quick Start guide or read more about the concepts behind Handoff.