Quickstart Guide

Get up and running with Handoff in minutes. This guide covers the essential steps for designers to set up the Figma plugin and for developers to initialize the Handoff CLI and build their first design system documentation.

1. Getting Started with the Figma Plugin

The Handoff Figma Plugin is the easiest way to define design decisions and preview tokens directly within your design environment.

Installation & Setup

  1. Install the Plugin: Add the Handoff plugin from the Figma Community.
  2. Use a Starter File: If you don't have a design system file ready, start with one of our official templates:
  3. Run the Plugin: Open your Figma file and launch Handoff from the Plugins menu.

Your First Tokens

  • Define: Use the plugin interface to map your Figma components and styles to design tokens.
  • Preview: Instantaneously view a live preview of how your tokens and assets will be exported for developers.

2. Getting Started with the CLI / App

The Handoff CLI automates the extraction of design tokens and builds a custom documentation website for your team.

Prerequisites

  • Node.js 16 or higher.
  • Figma Developer Token: Generated in your Figma Account Settings.
  • Figma File ID: The unique ID in your Figma file URL (e.g., figma.com/file/[FILE_ID]/...).

Installation & Initialization

  1. Install the Tool: 
    example.sh
    bash
    1npm install -g handoff-app
  2. Initialize Project: Create a new directory and navigate into it: 
    example.sh
    bash
    1mkdir my-design-system && cd my-design-system
  3. Fetch Tokens: Run the fetch command: 
    example.sh
    bash
    1handoff-app fetch
  4. Authenticate: Provide your Figma Developer Token and File ID when prompted.

Explore the Results

  • Build the Site: Run handoff-app start to launch a local version of your new design system documentation.
  • Exported Data: Look in the exported folder to see the generated JSON tokens, Sass/CSS variables, and component assets.

Next Steps

Now that you've completed the basic setup, explore the deep dive for your specific role: