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

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 - https://github.com/Convertiv/handoff-app/tree/main/sass/project/