Overview

#Why Tokens matter

Design systems break when values are copied manually across dozens of files.

Tokens in SXL Studio move these decisions into structured JSON and let you:

• edit values once and reuse everywhere;
• apply tokens directly to selected layers;
• re-apply bindings after layout or component changes;
• export to native Figma Variables and Styles;
• keep design and code aligned through predictable token paths.

#What the Tokens tab includes

#1. File tree (left side)

The side tree is your token file workspace.

You can:

• create token files;
• create folders and move files with drag and drop;
• rename, duplicate, and delete files/folders;
• search files by file name;
• reset Diff-ID for a file or for the whole token scope.

#2. Token editor (main area)

When you open a token file, SXL Studio shows a visual token editor.

Main capabilities:

• create tokens by type group (Styles, Dimension, Borders, Effects, Typography, Animation, Other);
• edit token name/path, value, description, and extensions;
• open context menu per token to apply to specific properties;
• search tokens by name/path and by string value inside the opened file.

For composition and template files, the center area switches to composition/template-specific controls.

Editing a value patches the existing token node in place. It does not move a literal dotted key such as 1.5, change the token's own or inherited $type, or rewrite unrelated metadata. The path changes only when you edit the name/path field.

#3. Collections

The Collections section of the left sidebar lists every collection declared in config.json. Open one to see its mode files side by side as a matrix:

• rows are token paths from the collection, in the order the files author them;
• mode columns hold the value each mode authors, exactly as written — aliases are shown, not resolved;
• — means that the token is absent from that mode. It is a UI state and is never written as a sentinel value to JSON;
• the Values column on the right counts the distinct values in the row.

Click a cell, or focus it and press Enter, to edit it in place. The same field accepts a raw value that matches the token type, an alias such as {color.brand.primary}, or a math expression for a compatible numeric type. Shift-click selects a rectangular range and Cmd/Ctrl-click toggles individual cells; one edit then writes the whole selection as one operation.

The same view runs bulk operations from its context menus: create, duplicate, rename and delete tokens; rename, duplicate and delete whole groups; and edit token fields, descriptions and figma.modify metadata.

Every write — including a single-cell edit — goes through a preview first, and the whole selection is refused rather than partly applied when any destination cannot be proved. Configured disabled collections and modes remain visible for inspection but are read-only. There is no undo in this view; recover an applied write through Git Sync.

Full reference, including the complete keyboard table and every refusal: Collections.

#4. Footer actions (Tokens tab)

In Design mode, footer actions include:

• Export variables & styles;
• Import variables & styles;
• Collection Settings;
• Reset Diff-ID.

In Dev Mode, the footer uses Transform actions instead of design-canvas apply actions.

#Creating and editing tokens

Typical token edit flow:

1. Create or open a token file.
2. Add a token from the type bar or type section.
3. Set token path and value.
4. Optionally add:

• $description
• $extensions.figma.scopes
• $extensions.figma.codeSyntax (Web, Android, iOS, mapped to Figma platforms WEB, ANDROID, iOS)
• $extensions.figma.hide
• $extensions.figma.modify (for color modifiers)

5. Save and apply/export.

Detailed schema is documented here: Token JSON format.

#Apply Tokens workflow

Apply Tokens runs with scope:

• Selection
• Page
• Document

Execution pipeline is deterministic and always follows this order:

1. Re-apply composition bindings.
2. Stabilize eligible instances without clearing user-owned overrides.
3. Re-apply template bindings.
4. Re-apply individual appliedTokens bindings.

This is why Apply Tokens can restore bindings after manual detach or override drift.

Apply Tokens does not blanket-reset instance overrides. Text, component properties, instance swaps, and properties not authored by the composition remain unchanged.

#Aliases and math

Tokens support references:

{ "$value": "{colors.brand.primary}", "$type": "color" }

And numeric math expressions such as:

{ "$value": "clamp(16px, {spacing.base} * 2, 40px)", "$type": "spacing" }

Supported math features include operators (+ - * / %), parentheses, constants (pi, e), and functions like min, max, clamp, round, pow, sqrt, sin, cos, tan, and others.

#Export model: what goes where

#Variable export (simple token types)

Simple token types map to Figma Variable resolved types (COLOR, FLOAT, STRING, BOOLEAN).

Examples:

• color → COLOR variable
• spacing, sizing, number, fontSize → FLOAT variable
• fontFamily, fontWeight, text → STRING variable
• boolean → BOOLEAN variable

#Style export (composite/style token types)

Composite/style tokens export to Figma Styles:

• gradient, fill, img → Paint Style
• shadow, blur, backdrop-blur, effects, glass → Effect Style
• typography → Text Style
• grid → Grid Style

#Apply/code-oriented token types

Some types are apply/code oriented or internal-only and do not produce Figma variables directly (for example border, strokeStyle, template, composition, transition, custom).

#Figma constraints you should expect

• Figma Variables are limited to 4 resolved types (COLOR, FLOAT, STRING, BOOLEAN).
• Available variable scopes depend on resolved type.
• Reordering in Variables/Styles can be best-effort because of Figma API constraints.
• In rare cases, Figma UI panels can lag behind already-applied values.

Reference: Figma Plugin API — Variable resolved types and scopes

#Recommended workflow

1. Keep primitive tokens and semantic tokens separated.
2. Use aliases for semantic layers.
3. Apply tokens during design work.
4. Run Apply Tokens before QA handoff.
5. Export variables/styles for stable Dev Mode handoff.

#Related pages

• Collection matrix: Collections
• JSON format: Token JSON format
• Type map: Token types
• Export: Export Variables & Styles
• Import: Import Variables & Styles from Figma