Overview

#Why Tokens matter

Every design system is built on decisions: which colors to use, which spacing, which typefaces. When those decisions live "in someone's head" or are scattered across files, changes become a nightmare. Rebrand the primary color? Update typography? Recalculate spacing for a new grid? That means hours of manual work and inevitable misses.

Tokens turns design decisions into structured data. One JSON file describes the entire design system: colors, dimensions, shadows, typography, animations. Change a value in one place and it updates everywhere — in the design, in Figma variables, in exported code.

#What you get

• Single source of truth — all tokens are stored in DTCG-format JSON files right inside Figma.
• Instant application — select an element, pick a token, click Apply. Color, size, shadow, typography — applied to layers immediately.
• Export to Figma Variables & Styles — tokens become native Figma variables and styles with one click.
• Code-ready — every token carries code syntax (CSS, Swift, Kotlin) that developers see in Dev Mode.
• Aliases & references — one token references another via {path.to.token}. Change the base — all dependents update.
• Color modifiers — lighten, darken, alpha, mix — directly in the token, no manual calculations.
• Git sync — tokens live in the repository. Designer updates → developer receives. Developer updates → designer receives.

#Tokens tab interface

#Layout

#Left panel — file tree

Tokens are organized in JSON files displayed in a tree. Each file can contain groups and subgroups of any nesting depth.

Features:

• create a new token file;
• upload JSON from disk;
• folders for file organization;
• search by token name and value;
• drag-and-drop files;
• Git synchronization.

#Visual editor

Selecting a file opens the visual editor where tokens are grouped by type:

• Styles — Color, Gradient, Image, Fill, Opacity
• Dimension — Dimension, Number, Spacing, Sizing
• Borders — Border, Border Width, Border Radius, Stroke Style
• Effects — Shadow, Backdrop Blur, Blur, Glass, Effects
• Typography — Typography and all atomic types (Font Size, Font Weight, Line Height, etc.)
• Animation — Duration, Cubic Bezier, Transition
• Other — String, Boolean, Grid, Template

Each token is displayed as a card with a value preview. Click to open the token editor.

#Toolbar

#Creating a token

To create a token, click a type in the file's empty state or use the "+" button next to a group. The editor opens with:

• Name — token path (use / for nesting: brand/primary);
• Value — the value (depends on type);
• Description — purpose description;
• Figma Scopes — variable visibility scopes in Figma;
• Code Syntax — custom syntax for Web, iOS, Android.

#Applying tokens

#Apply Tokens

The Apply Tokens button in the plugin header re-applies all token bindings to the design:

Apply Tokens handles four kinds of bindings on each node:

1. Compositions — nodes linked to compositions ($type: "composition") are refreshed from JSON.
2. Instance repair — for INSTANCE nodes, overrides are cleared and core properties are restored from the main component.
3. Templates — nodes linked to a template ($type: "template") receive every style defined in that template (color, typography, layout, etc.).
4. Individual tokens — single-property bindings (fill, stroke, font-size, spacing, …) that were previously applied via the token palette.

Steps 3 and 4 restore variable/style links even if you manually detached them in Figma (Inspector → Detach variable/style). The value will not stay orphaned — the plugin re-binds it to the variable or style on the next Apply Tokens run.

#Applying to a layer

Select a layer → click a token → the plugin binds the value to the layer property. Defaults:

The property can be overridden via the context menu when applying.

#Aliases — token references

One of the most powerful features is aliases. Instead of duplicating values, a token references another:

{
  "brand": {
    "primary": {
      "$value": "#6366F1",
      "$type": "color"
    }
  },
  "button": {
    "background": {
      "$value": "{brand.primary}",
      "$type": "color"
    }
  }
}

If you change brand.primary to #8B5CF6, every token referencing it updates automatically.

#Color modifiers

Color tokens support modifiers via $extensions:

{
  "brand": {
    "primary-light": {
      "$value": "{brand.primary}",
      "$type": "color",
      "$extensions": {
        "figma.modify": {
          "type": "lighten",
          "value": 0.2,
          "space": "oklch"
        }
      }
    }
  }
}

Supported color spaces: srgb, hsl, lch, oklch, p3.

Modifiers can be chained — each one is applied to the result of the previous.

#Export

#To Figma Variables

Export Variables converts tokens into native Figma variables:

• Color → Color Variable
• Dimension, Spacing, Sizing, Font Size, etc. → Number Variable
• Font Family, Font Weight → String Variable
• Boolean → Boolean Variable

Each token gets Figma Variable Scopes, Code Syntax (Web/iOS/Android), and can be hidden from publishing via figma.hide.

#To Figma Styles

Composite tokens export as styles:

• Gradient, Fill, Image → Paint Style
• Shadow, Blur, Backdrop Blur, Glass, Effects → Effect Style
• Typography → Text Style
• Grid → Grid Style

Figma limitation: not all token types support variable export. Types border, strokeStyle, fontStyle, textCase, textDecoration, transition, duration, cubicBezier, template, composition don't create variables — they apply directly or export to code only.

#Example: building a color system

1. Create a file colors.json:

{
  "neutral": {
    "$type": "color",
    "50": { "$value": "#FAFAFA" },
    "100": { "$value": "#F5F5F5" },
    "200": { "$value": "#E5E5E5" },
    "300": { "$value": "#D4D4D4" },
    "400": { "$value": "#A3A3A3" },
    "500": { "$value": "#737373" },
    "600": { "$value": "#525252" },
    "700": { "$value": "#404040" },
    "800": { "$value": "#262626" },
    "900": { "$value": "#171717" }
  },
  "brand": {
    "$type": "color",
    "primary": { "$value": "#6366F1" },
    "secondary": { "$value": "#EC4899" }
  },
  "semantic": {
    "$type": "color",
    "background": { "$value": "{neutral.50}" },
    "text": { "$value": "{neutral.900}" },
    "accent": { "$value": "{brand.primary}" }
  }
}

2. Click Export Variables — Figma gets a variable collection with all colors.

3. Select a frame → pick semantic.background → Apply.

#Where to store media files

All screenshots and videos for this section go in:

Site/public/docs-media/tokens/

Recommended structure:

Site/public/docs-media/tokens/
├── tokens-overview-demo.mp4
├── tokens-visual-editor.png
├── tokens-create-color.png
├── tokens-color-system.mp4
├── tokens-apply-demo.mp4
└── tokens-export-variables.png

#Related pages

• Full type map: Token types
• JSON format and syntax: Token JSON format
• Styles group: Color, Gradient, Image, Fill, Opacity
• Export: Export Variables & Styles
• Import: Import Variables & Styles from Figma