Обзор

#Зачем нужен Tokens

Дизайн-система ломается, когда значения копируются вручную по десяткам файлов.

Tokens в SXL Studio переводит эти решения в структурированный JSON и позволяет:

• редактировать значения в одном месте;
• применять токены напрямую к выделенным слоям;
• повторно применять привязки после изменений layout и компонентов;
• экспортировать в нативные Figma Variables и Styles;
• держать дизайн и код синхронизированными через стабильные token path.

#Что есть во вкладке Tokens

#1. Дерево файлов (левая часть)

Side tree — это рабочая область файлов токенов.

Вы можете:

• создавать файлы токенов;
• создавать папки и перемещать файлы через drag-and-drop;
• переименовывать, дублировать и удалять файлы/папки;
• искать файлы по имени файла;
• сбрасывать Diff-ID для файла или для всего token scope.

#2. Редактор токенов (центральная область)

При открытии token-файла SXL Studio показывает визуальный редактор.

Основные возможности:

• создание токенов по группам типов (Styles, Dimension, Borders, Effects, Typography, Animation, Other);
• редактирование пути/имени, значения, описания и extensions;
• контекстное меню токена для применения в конкретные свойства;
• поиск токенов по имени/пути и по строковому значению в открытом файле.

Для файлов composition и template центральная область переключается в специальный режим управления composition/template.

Изменение значения патчит существующую ноду токена на месте. Оно не переносит literal-ключ с точкой вроде 1.5, не меняет собственный или унаследованный $type токена и не переписывает посторонние метаданные. Путь меняется только при редактировании поля имени/пути.

#3. Коллекции

Секция Collections в левой панели перечисляет все коллекции, объявленные в config.json. Откройте одну из них, чтобы увидеть файлы её modes рядом друг с другом в виде матрицы:

• строки — это пути токенов из коллекции, в том порядке, в каком их задают файлы;
• в колонках modes находятся исходные значения каждого mode ровно в том виде, в каком они записаны: алиасы показываются, а не вычисляются;
• — означает, что токена нет в этом mode. Это состояние UI, которое никогда не записывается в JSON как специальное значение;
• колонка Values справа считает количество различных значений в строке.

Нажмите на ячейку или переведите на неё фокус и нажмите Enter, чтобы отредактировать её на месте. В одном поле можно указать raw-значение, соответствующее типу токена, алиас вида {color.brand.primary} или математическое выражение для совместимого числового типа. Shift-click выделяет прямоугольный диапазон, Cmd/Ctrl-click добавляет и убирает отдельные ячейки; одна правка записывает всё выделение как одну операцию.

Из контекстных меню этого же представления запускаются массовые операции: создание, дублирование, переименование и удаление токенов; переименование, дублирование и удаление целых групп; редактирование полей токена, описаний и метаданных figma.modify.

Любая запись — включая правку одной ячейки — сначала проходит предпросмотр, а всё выделение отклоняется целиком, а не применяется частично, если хотя бы одно назначение не удалось доказать. Отключённые в конфигурации коллекции и modes остаются видимыми для просмотра, но доступны только для чтения. Отмены (undo) в этом представлении нет; применённую запись восстанавливают через Git Sync.

Полное описание, включая таблицу горячих клавиш и все причины отказа: Коллекции.

#4. Действия внизу вкладки Tokens

В Design mode доступны:

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

В Dev Mode вместо canvas-операций применяется режим Transform.

#Создание и редактирование токенов

Типовой процесс:

1. Создайте или откройте token-файл.
2. Добавьте токен через type bar или секцию типа.
3. Укажите путь токена и значение.
4. Опционально добавьте:

• $description
• $extensions.figma.scopes
• $extensions.figma.codeSyntax (Web, Android, iOS, сопоставляются с платформами Figma WEB, ANDROID, iOS)
• $extensions.figma.hide
• $extensions.figma.modify (для color-модификаторов)

5. Сохраните и примените/экспортируйте.

Подробная схема описана здесь: JSON-формат токенов.

#Как работает Apply Tokens

Apply Tokens запускается со scope:

• Selection
• Page
• Document

Пайплайн выполняется детерминированно и всегда в этом порядке:

1. Повторное применение composition bindings.
2. Стабилизация подходящих инстансов без очистки пользовательских overrides.
3. Повторное применение template bindings.
4. Повторное применение одиночных appliedTokens bindings.

Именно поэтому Apply Tokens может восстановить связи после ручного detach или drift override.

Apply Tokens не выполняет blanket reset overrides. Текст, component properties, instance swaps и свойства, которых нет в composition, остаются без изменений.

#Алиасы и математика

Токены поддерживают ссылки:

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

И числовые выражения, например:

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

Поддерживаются операторы (+ - * / %), скобки, константы (pi, e) и функции min, max, clamp, round, pow, sqrt, sin, cos, tan и другие.

#Модель экспорта: что куда попадает

#Экспорт в Variables (простые типы)

Простые типы токенов маппятся на Figma Variable resolved types (COLOR, FLOAT, STRING, BOOLEAN).

Примеры:

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

#Экспорт в Styles (композитные/style типы)

Композитные/style токены экспортируются в Figma Styles:

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

#Apply/code-ориентированные типы

Часть типов ориентирована на apply/code или internal-only и не создаёт Figma variables напрямую (например border, strokeStyle, template, composition, transition, custom).

#Ограничения Figma, которые важно учитывать

• Figma Variables ограничены 4 resolved type (COLOR, FLOAT, STRING, BOOLEAN).
• Доступные variable scopes зависят от resolved type.
• Reorder в Variables/Styles может быть best-effort из-за ограничений Figma API.
• В редких случаях UI-панели Figma могут обновляться позже, чем фактически применённые значения.

Ссылка: Figma Plugin API — Variable resolved types and scopes

#Рекомендуемый workflow

1. Разделяйте primitive-токены и semantic-токены.
2. Используйте алиасы для semantic-слоя.
3. Применяйте токены в процессе дизайна.
4. Перед QA/handoff запускайте Apply Tokens.
5. Экспортируйте variables/styles для стабильного Dev Mode handoff.

#Связанные страницы

• Матрица коллекции: Коллекции
• JSON-формат: JSON-формат токенов
• Карта типов: Типы токенов
• Экспорт: Экспорт Variables и Styles
• Импорт: Import Variables и Styles из Figma