Overview

So what is Handoff, and why would I want to use it?

Handoff is an open-source tool for extracting design tokens from the Figma REST API and building frontend developer documentation from that Figma file. By automating the design token delivery, Handoff helps eliminate bottlenecks between design and development. We call this Design Operations.

Ok, But What is Handoff?

Handoff is a collection of 4 JavaScript tools:

  • Figma Token Extraction - A framework for extracting standardized design foundations and components from Figma.
  • Transformation Pipeline - A set of transformers for producing SASS, CSS, AWS Design Tokens, and preview snippets from that data.
  • Documentation Web App - A static, client-side, JavaScript web app that renders live, working previews of your components, tokens, and styles.
  • Delivery Tools - Easy build tooling and a CI/CD wrapper that allows automation to render and ship the various deliverables as needed.

How Does it Work?

Handoff works by extracting design foundations and component data from well-formed Figma libraries, storing them as JSON, and then transforming them into design tokens. Those design tokens are published as SASS and CSS variables.

Out of the box, Handoff has native SCSS and CSS maps to connect these tokens to any site using the Bootstrap 5 frontend framework. If you use another framework, or custom CSS, you can easily write map files to connect the generated tokens with your site or application.

Once Handoff extracts design tokens and variables, it builds a statically generated NextJS application that can be published to the web. This asset can be hosted on a static webhost (NGINX, s3/CloudFront, Cloudflare pages etc).

This pipeline from Figma to the Documentation Web app can be automated via CI/CD to provide automatic, up-to-date, easily readable developer documentation.