Scaffolding a new Handoff project is quick and easy. This guide will walk you through using the create-handoff-app utility, configuring your Figma credentials, and booting your local development environment in minutes.
Scaffolding a new Handoff project is the fastest way to get a governed design-to-code pipeline running. Using our official CLI utility, you can bootstrap a complete documentation site and token pipeline with minimal configuration.
The easiest way to initialize a Handoff project is by using create-handoff-app. This utility handles the directory structure, dependency installation, and initial configuration.
In your terminal, run the following command:
example.shbash1npx create-handoff-app my-design-system
Replace my-design-system with the desired name of your project folder.
During the installation process, the CLI will prompt you for two essential pieces of information from Figma:
figma.com/file/[ID]/...).These credentials allow Handoff to securely fetch design tokens, styles, and assets directly from your Figma libraries.
[!TIP] You can skip these prompts during initialization and add them later to your
handoff.config.jsor as environment variables (HANDOFF_FIGMA_PROJECT_IDandHANDOFF_FIGMA_DEV_ACCESS_TOKEN).
Once the initialization is complete, navigate into your project directory and start the Handoff engine.
example.shbash1cd my-design-system
If the CLI didn't automatically install them, run:
example.shbash1npm install
example.shbash1npm run dev
Your documentation site will now be available at http://localhost:3000. Any changes you make to your Figma file can be synced by running npm run fetch or simply restarting the dev server.
Now that your project is running, explore how to customize your system:
handoff.config.js.