Figma tokens to CSS, SCSS and TypeScript | FISYCO

A tokens library turns Figma variables and styles into files in your repository: DTCG, JSON, CSS custom properties, SCSS, TypeScript and JavaScript with type declarations. This page covers the settings that shape those files and shows what the generated output looks like.

Before you start

Figma is connected to your workspace, and the file is visible to that connection.
A repository is connected to the project. See Connect a repository.
Styles sync on their own. Variables need a Figma Enterprise plan or the FISYCO plugin, which sends them from inside Figma. See FISYCO plugin for Figma.
You're a maintainer of the project, or a workspace owner or admin.

Create the library

Open the project, click Add library, choose Tokens and click Continue.
General. Name the library and paste the link to the Figma file.
Sync method. Choose Styles automatically, variables via the plugin, or Variables from Figma if your Figma plan opens the variables API.
Styles. All style groups start selected. Clear the ones you don't need.
Variables. Pick the variable groups to sync. Skip this step if styles are enough.
Generation. Set the Repository folder (src/tokens by default), the formats and the naming described below.
Click Create library.

Choose what to sync

The library syncs exactly the groups you select. A group is the first segment of a token name: color/bg/surface belongs to color. Variable groups are counted per collection, and style groups per style type.

An empty selection means nothing, not everything. A new library needs at least one group.

To change the selection later, open the library and click Edit composition. Before you click Save composition, the bar shows how many tokens the next pull request will remove from the repository. It won't save a selection with no groups. The same lists are under Settings → Source.

Select the groups your aliases point to. An alias to a token outside the library becomes initial in CSS and is left out of the DTCG file.

Output formats

Pick one or more under Output formats. New libraries start with DTCG, JSON, CSS, TS and DTS.

Checkbox	Files	What's inside
DTCG	`design-tokens.tokens.json`, or one `design-tokens.<mode>.tokens.json` per mode	W3C Design Tokens format 2025.10, read by Style Dictionary and Figma's variable import
JSON	`tokens.json`	`variables` and `styles` trees with values by mode
CSS	`tokens.css`, plus `token-styles.css` when there are text styles	custom properties and text style classes
SCSS	`tokens.scss`	a Sass variable per token, plus the same `:root` block
TS	`tokens.ts`	the `tokens` tree, `tokenValuesByPath`, `tokenPaths` and path types
JS	`tokens.js`	the `tokens` tree
DTS	`tokens.d.ts`	full types next to `tokens.ts`; with JS alone, the `TokenPath` union

Generate .d.ts types has the last word on the type file. When it's on and TS or JS is selected, tokens.d.ts is written even if DTS is cleared. When it's off, no tokens.d.ts is written.

Names

A token's code name is built in three steps:

Naming template builds the name from placeholders. It must contain {name}, the token name in Figma. {collection}, {type} and {source} are optional. The default is {name}.
The result is lowercased, and every run of characters other than letters, digits and / becomes a hyphen. Each / starts a new segment.
Name case formats each segment: kebab-case by default, camelCase or snake_case. CSS var prefix goes in front of the CSS variable; the default is token.

Figma name	Setting changed	CSS variable	Path in `tokens.ts`
`color/bg/surface`	none	`--token-color-bg-surface`	`variables.color.bg.surface`
`Spacing/MD`	none	`--token-spacing-md`	`variables.spacing.md`
`border/radius large`	camelCase	`--token-border-radiusLarge`	`variables.border.radiusLarge`
`border/radius large`	snake_case	`--token-border-radius_large`	`variables.border.radius_large`
`color/bg/surface` in collection `Semantic`	template `{collection}/{name}`	`--token-semantic-color-bg-surface`	`variables.semantic.color.bg.surface`
`color/bg/surface`	prefix `ds`	`--ds-color-bg-surface`	`variables.color.bg.surface`

Styles land under styles. in tokens.ts, and {collection} is empty for them. The prefix also applies to SCSS variables and text style classes.

Names are lowercased before the case is applied, so camelCase finds word breaks only at spaces, hyphens and other separators. radiusLarge in Figma becomes radiuslarge. Changing the template, case or prefix renames every token in the generated files, so plan it like any rename in code.

Modes

Modes strategy decides how light, dark and other modes are written. Mode names become kebab-case: Dark Mode turns into dark-mode. Modes with the same name in different collections share one block or file.

Inline values

tokens.css starts with a :root block that holds every token at its default mode. A [data-theme="<mode>"] block follows for each mode, the default one included:

:root
{
  --token-color-bg-surface: #FFFFFF;
  --token-color-text-primary: #111827;
  --token-spacing-md: 16px;
}

[data-theme="light"]
{
  --token-color-bg-surface: #FFFFFF;
  --token-color-text-primary: #111827;
  --token-spacing-md: 16px;
}

[data-theme="dark"]
{
  --token-color-bg-surface: #111827;
  --token-color-text-primary: #F9FAFB;
  --token-spacing-md: 16px;
}

Set data-theme on <html> or on any element to switch a subtree:

<html data-theme="dark">

Mode blocks go into tokens.css only; with this strategy, tokens.scss holds the default values. A collection with a single mode gets a block too. Figma calls that mode Mode 1 until you rename it, which gives [data-theme="mode-1"].

Separate files

Each mode gets its own tokens.<mode>.css, and tokens.<mode>.scss when SCSS is selected. Every mode file writes to :root, and tokens.css keeps the defaults. This strategy needs CSS or SCSS among the formats.

@import "./tokens/tokens.css";
@import "./tokens/tokens.dark.css" (prefers-color-scheme: dark);

DTCG and modes

The DTCG format has no modes, so FISYCO writes one complete file per mode, whatever the strategy. A token without that mode, such as a style, appears in every file with its own value. If no variable has two or more modes, you get a single design-tokens.tokens.json.

Units for numbers

Figma stores numbers without units, and padding: var(--token-spacing-md) needs one. In CSS and SCSS, FISYCO picks the unit from the variable's scopes, the places where Figma lets you apply it.

Scopes in Figma	Unit in CSS and SCSS	Example
corner radius, width and height, gap, stroke, effects, font size, line height, letter spacing, paragraph spacing, paragraph indent	`px`	`--token-spacing-md: 16px;`
opacity	`%`, because Figma stores opacity as 0 to 100	`--token-opacity-disabled: 40%;`
font weight	none	`--token-font-weight-bold: 700;`
all scopes, scopes with different units, or no scopes recorded	Unit for numbers: px (default) or No unit	`--token-size-base: 8px;`

An alias carries no unit itself; the variable it points to does. JSON, TS, JS and DTCG keep plain numbers.

Text styles

A text style becomes a font shorthand variable in tokens.css, for example --token-typography-heading: 700 24px/32px "Inter";. It also becomes a class in token-styles.css:

.token-style-token-typography-heading
{
  font-family: "Inter";
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
}

The class name is the prefix, -style-, then the variable name, so the prefix appears twice. A style without a font family or size gets no font variable, because the shorthand is invalid without them.

Use the tokens

CSS

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

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

.card-title {
  font: var(--token-typography-heading);
}

SCSS

tokens.scss declares a Sass variable per token, followed by the same :root block, so loading it also emits the custom properties. An alias stays a var() reference in Sass:

$token-color-primary: #1A66E6;
$token-color-text: var(--token-color-primary);
$token-spacing-md: 16px;

:root
{
  --token-color-primary: #1A66E6;
  --token-color-text: var(--token-color-primary);
  --token-spacing-md: 16px;
}

@use "./tokens/tokens" as *;

.card {
  padding: $token-spacing-md;
}

TypeScript

tokens.ts exports the tree as tokens, a flat tokenValuesByPath map and a tokenPaths list, all as const. Values by mode are keyed by Figma mode ID. An alias appears as { "$alias": "<variable ID>" }.

import { tokenValuesByPath } from "./tokens/tokens";
import type { TokenPath } from "./tokens/tokens";

const spacing = tokenValuesByPath["variables.spacing.md"];
// { type: "float", valuesByMode: { "1:0": 16, "1:1": 16 } }

const path: TokenPath = "variables.spacing.mdd"; // type error: no such token

DTCG

An excerpt of design-tokens.light.tokens.json. Groups follow the name segments, a reference stays a reference, and $extensions keeps the Figma variable ID:

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.102,
          0.4,
          0.902
        ],
        "alpha": 1,
        "hex": "#1a66e6"
      },
      "$extensions": {
        "com.fisyco": {
          "id": "VariableID:1:2",
          "source": "variables"
        }
      }
    },
    "text": {
      "$type": "color",
      "$value": "{color.primary}",
      "$extensions": {
        "com.fisyco": {
          "id": "VariableID:1:3",
          "source": "variables"
        }
      }
    }
  }
}

DTCG names carry no prefix. Groups use the same case as the CSS variables, so Style Dictionary builds --color-primary where FISYCO writes --token-color-primary. Text styles become typography tokens. Strings and booleans have no $type, because DTCG has no such types. Effects and gradients are left out.

Structure

Output structure is Single file by default: every file sits in the library folder. Layered moves CSS and SCSS into styles/, mode files into styles/themes/, and adds a styles.css entry:

@import './styles/tokens.css';
@import './styles/token-styles.css';

The entry leaves out mode files, because each of them writes to :root. Load the mode file you need on its own.

Get the pull request

After a sync, open the library and click Create PR, or Update PR when one is already open. To skip the button, turn on Automatically create a PR after each sync under Settings → Pull Requests.

The description counts added, modified and removed tokens and lists the changes. A variable renamed in Figma keeps its ID, so it arrives as a rename. Files FISYCO delivered before but no longer writes are deleted in the same commit; other files in the folder stay untouched. To check each change before the pull request, see Review changes and pull requests.

A change to generation settings alone, such as a new prefix, changes no tokens in Figma. With automatic pull requests on, the next sync delivers it anyway, because FISYCO compares the generated files with the last delivery. A manual pull request needs a sync with changes.