Handoff Documentation

Handoff is an open source design token pipeline and documentation engine that bridges the gap between design and development. Discover how Handoff can empower your team to build, maintain, and consume design systems with unprecedented speed and accuracy.

What is Handoff?

Handoff helps you take existing Figma designs, organize them into a design system, and distribute them to developers in a format that they can use.

Handoff is not a standalone design tool or CMS. It sits between design and development — connecting the two by making structured design decisions available as data that both humans and machines can consume.

The Handoff pipeline: Figma → CLI/Plugin → Token JSON → Documentation App → Consumers

  1. Designers use the Handoff Figma Plugin to annotate components with structured metadata, and verify that their figma files are set up with published variables, styles, and components.
  2. The Handoff CLI is used to extract the design tokens from the Figma file and generate a tokens.json file.
  3. The Handoff Documentation App is used to generate a static React documentation site from the token data.
  4. Developers build component libraries from the designs, using whatever framework they like. We've built handoff sites around Tailwind, Bootstrap, Material, Bulma, Fjaka, and more. You can use Handlebars, React, or CSF to describe your components.
  5. Consumers can use the Handoff REST API to programmatically access the design tokens and component data. Project managers and stakeholders can use the Handoff Documentation App to explore and understand the design system. LLM's, CI/CD pipelines, and other tools can use the REST API to programmatically access the design tokens and component data.

Key Themes

  • Governance: Centralize design decisions in a governed, versioned pipeline.
  • Consumption: Distribute tokens to human developers, transpilers, CI/CD, and even LLMs.
  • Automation: Eliminate manual handoff bottlenecks with automated extraction and transformation.

What describes your role?

Designers

Learn how to use the Handoff Figma plugin, define foundations, and maintain system consistency.

Design System Developers

Deep dive into managing tokens, building components, and extending the Handoff architecture with hooks.

Design System Consumers

Explore the REST API, CLI tools, and integrations for WordPress and HubSpot.

Non-Developer Users

A guide for stakeholders to explore and understand the design system through the web application.