Token Integration

Now that you understand token extraction, it's time to use the newly extracted tokens in your next project.

The tokens are exported as JSON from Figma. Those tokens are stored in the tokens.json data structure. Then Handoff performs a series of transformations to those tokens to generate structures that you can use elsewhere.

There are two transformations that produce files you can use in your web development - SASS and CSS. These transformers produce a set of exported variables that you can easily plug into your projects.

These variable files are exported to exported/variables. In that folder, you will see two files for each component:

  • {component}.css contains the tokens as CSS variables.
  • {component}_vars.scss contains the tokens as SASS variables.

Sample Integration

To use these variables in your project, you'll define a set of map files that connect these variables to your code. In a simple form, a map file for button color might look something like this:

1// Import button variables 2@import "./exported/variables/buttons"; 3// Primary Button Styles 4.btn-primary { 5 background-color: var(--button-primary-background); 6} 7

When the styles in Figma change, you can simply pull ./exported/variables/buttons and add it to your project, and the styles will update to match. This is a simple example. Let's look at something more complex. This example is for Bootstrap integration. It maps the variables onto the Bootstrap default vars for Sizes and Typography.

1/* ============================================================================= 2 BUTTONS (project/_buttons.scss) 3 ========================================================================== */ 4$prefix: ""; 5// Load raw SCSS variables for mapping 6@import "./exported/variables/buttons_vars"; 7@import "./exported/variables/buttons"; 8 9// SIZES 10// ------------------------------------------------------------------ 11 12// ----- 13// Button Layout 14// ----- 15 16$btn-border-width-sm: $button-small-border-width; 17$btn-border-width: $button-medium-border-width; 18$btn-border-width-lg: $button-large-border-width; 19 20$btn-padding-y-sm: $button-small-padding-top - $btn-border-width-sm; 21$btn-padding-y: $button-medium-padding-top - $btn-border-width; 22$btn-padding-y-lg: $button-large-padding-top - $btn-border-width-lg; 23 24$btn-padding-x-sm: $button-small-padding-left; 25$btn-padding-x: $button-medium-padding-left; 26$btn-padding-x-lg: $button-large-padding-left; 27 28$btn-border-radius-sm: $button-small-border-radius; 29$btn-border-radius: $button-medium-border-radius; 30$btn-border-radius-lg: $button-large-border-radius; 31 32$btn-focus-width: 0.25rem; 33 34// ----- 35// Button Typography 36// ----- 37 38$btn-font-size-sm: $button-small-font-size; 39$btn-font-size: $button-medium-font-size; 40$btn-font-size-lg: $button-large-font-size; 41 42$btn-line-height-sm: $button-small-line-height; 43$btn-line-height: $button-medium-line-height; 44$btn-line-height-lg: $button-large-line-height; 45 46// STYLES 47// ------------------------------------------------------------------ 48$btn-font-family: var(--button-medium-font-family); 49$btn-font-weight: var(--button-medium-font-weight); 50$btn-white-space: null; // Set to `nowrap` to prevent text wrapping 51$btn-text-decoration: var(--button-medium-text-decoration); 52$btn-letter-spacing: var(--button-medium-letter-spacing); 53$btn-text-transform: var(--button-medium-text-transform); 54 55$btn-box-shadow: var(--button-primary-box-shadow); 56$btn-focus-box-shadow: var(--button-primary-hover-box-shadow); 57$btn-active-box-shadow: var(--button-primary-hover-box-shadow); 58$btn-disabled-opacity: 0.65; 59$btn-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, 60 border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out; 61


Bootstrap 5 works best with Handoff. Handoff already has all the map files defined for all the Components we currently fetch. You can download those map files here -