SXL Studio
Tokens

Overview

What Tokens does in SXL Studio: token file management, apply workflow, export/import, and practical rules for production design systems.

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.

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)
  • $extensions.figma.hide
  • $extensions.figma.modify (for color modifiers)
  1. 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. Repair instances (removeOverrides + style stabilization).
  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.

Aliases and math

Tokens support references:

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

And numeric math expressions such as:

JSON
{ "$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 and do not produce Figma variables directly (for example border, strokeStyle, template, composition, transition).

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

  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.