Tokens in CSS, SCSS and TypeScript

A tokens library turns Figma variables and styles into files in your repository: CSS custom properties, SCSS, TypeScript, JSON and the DTCG format. This page covers the settings that shape those files and how to use them in code.

Before you start

Figma is connected to your workspace, and the file with the variables is visible to that connection.
A repository is connected to the project. See Connect a repository.
Variables from Figma need either an Enterprise plan on the Figma side or the FISYCO plugin. See FISYCO plugin for Figma.

Output formats

Choose one or more in Output formats. New libraries start with DTCG, JSON, CSS, TypeScript and .d.ts.

Format	File	Use it for
DTCG	`design-tokens.tokens.json`, one per mode	Style Dictionary and other tools that read the W3C format
JSON	`tokens.json`	your own scripts
CSS	`tokens.css`, plus `token-styles.css` for text styles	any web app
SCSS	`tokens.scss`	Sass projects
TypeScript	`tokens.ts`, `tokens.d.ts`	type-safe access and autocompletion
JavaScript	`tokens.js`	plain JS projects

Names

Every token becomes a CSS variable named after its Figma path: color/bg/surface becomes --token-color-bg-surface.

CSS var prefix replaces token. With acme, the variable is --acme-color-bg-surface.
Name case sets the case of each path segment: kebab-case by default, or camelCase.

An alias stays an alias. A variable that points to another becomes var(--token-…) in CSS, and a reference in DTCG.

Modes

Modes strategy decides how light, dark and other modes are written:

Inline values: tokens.css holds the default values in :root and one [data-theme="dark"] block per mode. Set data-theme on <html> or any element to switch.
Separate files: each mode gets its own tokens.<mode>.css (and .scss if selected), named after the mode in kebab-case. Load the one you need, or each behind a media query.

The DTCG format writes one complete file per mode in either case.

Structure

Output structure is Single file by default. Layered moves the CSS into a styles/ folder and adds a styles.css entry that imports the base files. With separate mode files, the entry doesn't import the modes, because each of them sets :root. Load the mode file on its own.

Use the tokens

In CSS:

@import "./tokens/tokens.css";

.card {
  background: var(--token-color-bg-surface);
  color: var(--token-color-text-primary);
}

Numbers from Figma, such as spacing and radii, are written without a unit: --token-spacing-md: 16;. Add the unit where you use them:

.card {
  padding: calc(var(--token-spacing-md) * 1px);
}

Text styles become classes in token-styles.css, and a font shorthand variable such as 700 24px/32px "Inter".

In TypeScript, tokens.ts exports the tree and a list of paths, so a typo in a token path fails the type check.

Get the pull request

After a sync, open the library and click Create PR, or turn on Automatically create a PR after each sync. The pull request description lists added, modified and removed tokens by name. A variable renamed in Figma keeps its ID, so it arrives as a rename.