How to export font tokens from Figma to CSS variables

Colors usually make it from Figma to code without trouble. Typography is where design systems drift: a heading is 32px in Figma, 2rem in one component and 30px in another. Turning your type styles into tokens, and those tokens into CSS variables, gives design and code one source of truth.

1. Model typography as variables in Figma

Figma text styles are not variables, so start by creating variables for the pieces a text style is made of. A common setup is one collection called Typography with:

• String variables for font families, such as font/family/display and font/family/body
• Number variables for sizes, such as font/size/sm, font/size/md, font/size/xl
• Number variables for weights (font/weight/regular = 400) and line heights (font/line-height/tight = 1.2)

Then bind those variables to your text styles in the Typography panel. Now a change to font/size/md updates every style that uses it.

2. Export the variables as design tokens

Export the collection as JSON, ideally in the W3C design tokens format ($value and $type for each token). A variables export plugin or Tokens Studio can do it. A font size token looks like this:

{
  "font": {
    "size": {
      "md": { "$type": "dimension", "$value": "16px" }
    },
    "family": {
      "body": { "$type": "fontFamily", "$value": ["Inter", "sans-serif"] }
    }
  }
}

3. Convert the tokens to CSS variables

Paste or open the JSON in the Design Token Converter and choose CSS as the output. It names each variable from its path, adds px to unitless sizes, quotes multi-word font names, and splits typography composites into one variable per property:

:root {
  --font-family-body: Inter, sans-serif;
  --font-size-md: 16px;
  --font-weight-regular: 400;
  --font-line-height-tight: 1.2;
}

4. Use the variables in your components

Reference the variables instead of raw values: font: var(--font-weight-regular) var(--font-size-md)/var(--font-line-height-tight) var(--font-family-body). When the design changes, you re-export and convert again, and the code follows without hunting for hard-coded sizes.

Make it fluid

If your sizes should grow with the screen, generate them with the Type Scale tool instead of fixed values: it outputs clamp() values for each step that you can drop into the same variables.

Open the tool: Design Token Converter →