Basic Configuration

The Handoff configuration file allows you to customize the essentials of how your project looks and works

To edit the basic settings, find the config.js file in the root of your project. Here you can configure basic settings like title, metadata, and sort configurations.

config.js contains all the basic configuration options for the site. This file is heavily commented and strictly typed to make it easy to know what options you have.

Common Configuration Options

title: The project title, often something like "Acme Design System".

client: The organization's name, used for alt text, and labels.

logo: A path to a logo as svg, png, or jpg. The path should be relative to the public root. If you put a file called logo.svg in the public root, you would set this value to /logo.svg.

favicon: A path to a favicon as an ico file. The path should be relative to the public root. If you put a file called favicon.ico in the public root, you would set this value to /favicon.ico.

google_tag_manager: Accepts a GTM ID, or null. If a GTM ID is found, Handoff will inject the GTM code, allowing you to add tracking to your site.

type_sort: Set the sort order for the Typography page. The page will match elements and sort, and then let the remaining items sort by their Figma order.

color_sort: Set the sort order for the Colors page. The page will match elements and sort, and then let the remaining items sort by their Figma order.

poweredBy: Sets a footer message linking to Handoff.com. Set to false or undefined to hide this message

type_copy: Set the default copy for the typography samples.

Other Options

  • design: A holder for color and typography objects. This will be used for future expansion.

  • assets: A holder for svg exported assets. Not used for configuration at present.

  • image_styles_help: Backwards compatible with a previous feature that allowed image styles to be defined.