A toolchain for Figma design tokens, enabling designers and developers to extract, transform, and distribute design decisions as code
MIT License
A design token pipeline to read figma files, extract tokens as JSON, and transform tokens into dev ready artifacts.
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 to eliminate bottlenecks between design and development.
Handoff is a collection of 4 javascript tools:
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.
Handoff is Awesome. Handoff is also really new. We're constantly building new features, and expanding what it can do. We'd love to chat if you have a use case that isn't quite met.
Open the Handoff Figma starter and duplicate this project to your account
Publish components to the library
Libraries
You'll need a developer token if you don't have one already
Help and Account
Account Settings
Personal Access Token
npm install -g handoff-app
mkdir my-new-project
cd my-new-project
), run handoff-app fetch
handoff-app start
This will fetch the latest from your Figma file and it will boot a demo site at http://localhost:3000
npm run fetch
Once that runs, your browser should update with the new colors.
Feel free to dive in! Open an issue or submit PRs.
Handoff follows the Contributor Covenant Code of Conduct.
MIT ©Convertiv