{"id":14981620,"url":"https://github.com/convertiv/handoff-app","last_synced_at":"2026-04-20T00:09:31.553Z","repository":{"id":65530680,"uuid":"593758111","full_name":"Convertiv/handoff-app","owner":"Convertiv","description":"A toolchain for Figma design tokens, enabling designers and developers to extract, transform, and distribute design decisions as code","archived":false,"fork":false,"pushed_at":"2024-05-22T11:52:13.000Z","size":3937,"stargazers_count":44,"open_issues_count":3,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-05-22T12:55:01.638Z","etag":null,"topics":["bootstrap","css","design-system","design-tokens","figma","figma-api","figma-plugin","handoff","scss","style-dictionary"],"latest_commit_sha":null,"homepage":"https://www.handoff.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Convertiv.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-26T19:19:27.000Z","updated_at":"2024-08-22T09:20:17.588Z","dependencies_parsed_at":"2024-05-22T13:00:46.785Z","dependency_job_id":null,"html_url":"https://github.com/Convertiv/handoff-app","commit_stats":{"total_commits":28,"total_committers":2,"mean_commits":14.0,"dds":0.0357142857142857,"last_synced_commit":"422da2de04559195d8eb1e94b82f0cc65e964a36"},"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Convertiv%2Fhandoff-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Convertiv%2Fhandoff-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Convertiv%2Fhandoff-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Convertiv%2Fhandoff-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Convertiv","download_url":"https://codeload.github.com/Convertiv/handoff-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238791894,"owners_count":19531027,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","design-system","design-tokens","figma","figma-api","figma-plugin","handoff","scss","style-dictionary"],"created_at":"2024-09-24T14:03:56.846Z","updated_at":"2026-04-11T04:08:56.238Z","avatar_url":"https://github.com/Convertiv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Handoff - Design Token Automation\n\n\u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/handoff-app\"\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/handoff-app?style=for-the-badge\u0026labelColor=000000\"\u003e\n\u003c/a\u003e\n\u003ca aria-label=\"License\" href=\"https://github.com/convertiv/handoff-app/blob/main/License.md\"\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/npm/l/handoff-app?style=for-the-badge\u0026labelColor=000000\"\u003e\n\u003c/a\u003e\n\nA design token pipeline to read figma files, extract tokens as JSON, and\ntransform tokens into dev ready artifacts.\n\n## Table of Contents\n\n* [What Is Handoff?](#what-is-handoff)\n* [How does it work](#how-does-it-work)\n  * [Handoff is in Beta!](#handoff-is-in-beta)\n* [Requirements](#requirements)\n* [Configuration hooks](#configuration-hooks)\n* [Get Started](#get-started)\n  * [Figma](#figma)\n  * [Create a project](#create-a-project)\n  * [Test fetch](#test-fetch)\n* [Further Reading](#further-reading)\n* [Maintainers](#maintainers)\n* [Contributing](#contributing)\n* [License](#license)\n\n## What Is Handoff?\n\nHandoff is an open source tool for extracting design tokens from the Figma REST\nAPI and building frontend developer documentation from that Figma file. By\nautomating the design token delivery, Handoff helps to eliminate bottlenecks\nbetween design and development.\n\nHandoff is a collection of 4 javascript tools:\n\n* **Figma Token Extraction** - A framework for extracting\n  standardized design foundations and components from Figma.\n* **Transformation Pipeline** - A set of transformers for producing SASS, CSS,\n  Style Dictionary, and preview snippets from that data.\n* **Documentation Web App** - A static, client side, Javascript web app that\n  renders live, working previews of your components, tokens and styles.\n* **Delivery Tools** - Easy build tooling and CI/CD wrapper that allows\n  automation to render and ship the various deliverables as needed.\n\n## How does it work?\n\nHandoff works by extracting design foundations and component data from\n[well-formed Figma libraries](https://www.figma.com/file/IGYfyraLDa0BpVXkxHY2tE/Starter-%5BV2%5D?node-id=0%3A1\\\u0026t=iPYW37yDmNkJBt1t-0),\nstoring them as JSON, and then transforming them into design tokens. Those\ndesign tokens are published as SASS and CSS variables.\n\nOut of the box, Handoff has native SCSS and CSS maps to connect these tokens to\nany site using the [Bootstrap 5](https://getbootstrap.com/) frontend\nframework. If you use another framework, or custom CSS, you can easily write\nmap files to connect the generated tokens with your site or application.\n\n* [Get Started](https://www.handoff.com/docs/quickstart)\n* [Requirements](https://www.handoff.com/docs/overview/requirements)\n* [Integrating Tokens](https://www.handoff.com/docs/tokens/integration)\n* [Customization](https://www.handoff.com/docs/customization)\n\nOnce Handoff extracts design tokens and variables, it builds a statically\ngenerated NextJS application that can be published to the web. This asset\ncan be hosted on a static webhost (NGINX, s3/Cloudfront, Cloudflare pages\netc).\n\n* [Tokens Overview](https://www.handoff.com/docs/tokens)\n* [Build Site](https://www.handoff.com/docs/tokens/publishing)\n\nThis pipeline from Figma to the Documentation Web app can be automated via CI/CD\nto provide automatic, up-to-date, easily readable developer documentation.\n\n* [CI/CD Integration](https://www.handoff.com/docs/guide/cicd)\n\n## Handoff is in Beta!\n\nHandoff is Awesome. Handoff is also really new. We're constantly building\nnew features, and expanding what it can do. We'd love to chat if you have\na use case that isn't quite met.\n\n## Requirements\n\n* A paid Figma account is required to publish the Figma file library\n* Node 18.17+\n* NPM 8+\n\n## Get Started\n\n### Figma\n\n1. Open the [Handoff Figma starter](https://www.figma.com/file/IGYfyraLDa0BpVXkxHY2tE/Starter-%5BV2%5D?node-id=0%3A1\\\u0026t=iPYW37yDmNkJBt1t-0)\n   and duplicate this project to your account\n\n2. Publish components to the library\n\n* Click on the Figma logo at the top left\n* Click on `Libraries`\n* Click on the current file\n* Click publish changes\n\nYou'll need a developer token if you don't have one already\n\n* Click on the Figma logo in the top left\n* Go to `Help and Account`\n* Click on `Account Settings`\n* Scroll to `Personal Access Token`\n* Enter a token name and hit enter\n* Note that token for the next steps\n\n## Create a project\n\nThe easiest way to get started is using the `handoff-app init` command to scaffold a new project:\n\n```bash\nnpm install -g handoff-app\nhandoff-app init\n```\n\nThis interactive CLI will guide you through:\n\n1. **Project name** - Enter a name for your project directory\n2. **Project type** - Choose between:\n   * **Project with sample components** - Includes example components to help you get started\n   * **Blank project** - Only the essential configuration files\n3. **Figma configuration** - Optionally provide your Figma project ID and developer access token\n\nThe scaffolding will:\n\n* Create a new directory with your project name\n* Generate all necessary configuration files\n* Install dependencies automatically\n\n### After scaffolding\n\n```bash\ncd my-handoff-project\nnpm run fetch    # Fetch design tokens from Figma\nnpm run start    # Start the documentation site\n```\n\nThis will fetch the latest from your Figma file and boot a demo site at http://localhost:3000\n\n### Alternative: Global installation\n\nYou can also install handoff-app globally:\n\n```bash\nnpm install -g handoff-app\ncreate-handoff-app\n```\n\nOr manually set up a project:\n\n```bash\nmkdir my-new-project \u0026\u0026 cd my-new-project\nhandoff-app fetch   # Will prompt for Figma credentials\nhandoff-app start\n```\n\n## Test Fetch\n\n* Now go back to your Figma file and change a button color\n* Republish the changes to the library. Click on the publish button from the main\n  dropdown. You'll see a list of changes that have been made. Clicking publish\n  will make those changes available to handoff.\n* Back in your project, open a new terminal tab and type `npm run fetch`\n\nOnce that runs, your browser should update with the new colors.\n\n## Configuration hooks\n\nPipeline customization is done in `handoff.config.js` under `hooks` (camelCase names: `validateComponent`, `jsBuildConfig`, `registerHandlebarsHelpers`, etc.). For example, `registerHandlebarsHelpers` runs after Handoff registers the built-in `field` and `eq` helpers so you can call `handlebars.registerHelper` for your `.hbs` preview templates.\n\nSee [docs/api.md](docs/api.md#hooks) for hook arguments and examples.\n\n## Further Reading\n\n* [Configure your project](https://www.handoff.com/docs/customization)\n* [Customize the content](https://www.handoff.com/docs/customization/content)\n* [Integrate tokens with your project](https://www.handoff.com/docs/tokens/integration)\n* [Build to Static Assets](https://www.handoff.com/docs/tokens/publishing)\n* [Integrate with Github Actions CI/CD](https://www.handoff.com/docs/infrastructure/github/)\n* [Integrate with Bitbucket Pipelines CI/CD](https://www.handoff.com/docs/infrastructure/bitbucket/)\n\n## Maintainers\n\n[@bradmering](https://github.com/bradmering)\n\n[@DomagojGojak](https://github.com/DomagojGojak).\n\n[@Natko](https://github.com/Natko).\n\n## Contributing\n\nFeel free to dive in! [Open an issue](https://github.com/Convertiv/handoff-app/issues/new) or submit PRs.\n\nHandoff follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.\n\n## License\n\n[MIT](LICENSE) ©Convertiv\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconvertiv%2Fhandoff-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconvertiv%2Fhandoff-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconvertiv%2Fhandoff-app/lists"}