Figma Plugin Guide

Maximize your design productivity with the Handoff Figma plugin, your primary tool for annotating and exporting components. This step-by-step guide walks you through installation, component annotation, and best practices for maintaining a healthy connection between design and code. Turn your Figma library into a live, interactive data pipeline.

The Handoff Figma Plugin is the primary tool for designers to communicate design decisions to the Handoff pipeline. It allows you to define components, their parts, and foundations directly within Figma.

Getting Started

  1. Install the Plugin: You can find the Handoff plugin in the Figma Community.
  2. Open the Plugin: Select a component or foundation layer and run the plugin (Figma > Plugins > Handoff).

Defining Foundations

Handoff automatically extracts standard Figma foundations:

  • Colors: Solid colors and gradients.
  • Typography: Font family, size, weight, and line height.
  • Effects: Shadows and blurs.

Use the plugin to group and name these foundations in a way that makes sense for your design system (e.g., Brand / Primary / 500).

Defining Components

For complex components, the plugin allows you to:

  • Map Parts: Identify the functional parts of a Figma component (e.g., the "label" and "icon" of a button).
  • Define Variants: Ensure that all component variants are correctly exported and documented.
  • Annotate Metadata: Add usage guidelines and "should/should not do" notes that will appear in the documentation.

Exporting to Handoff

Once your design decisions are defined, the Handoff CLI (npm run fetch) will use the Figma REST API to pull these decisions into your codebase. The plugin ensures that the data is structured correctly for the Handoff transformation pipeline.