SXL Studio
Tokens

Вкладка Tokens

Что находится на вкладке Tokens: дерево файлов и коллекций, визуальный и кодовый редактор, создание токенов, Apply Tokens, экспорт и импорт переменных и стилей.

Вкладка Tokens — центр работы с дизайн-системой. Здесь лежат JSON-файлы токенов, из них создаются переменные и стили Figma, отсюда токены применяются к слоям.

Вкладка Tokens: дерево файлов слева, открытый файл в визуальном редакторе справа, панель типов над списком токенов.

Что на вкладке

Дерево файлов

Слева две секции. Collections перечисляет коллекции из config.json: открыв коллекцию, вы увидите её токены таблицей по режимам, см. Коллекции. Files показывает папки и файлы токенов; числа справа — количество токенов.

Над деревом: поиск по токенам, создание файла и папки, свернуть или развернуть всё, сортировка. Файлы и папки перетаскиваются, переименовываются, дублируются и удаляются через контекстное меню. Файлы композиций и шаблонов отмечены своими иконками.

Внизу дерева четыре действия: Export variables & styles, Import variables & styles, Collection Settings и Reset Diff-ID.

Редактор файла

Файлы, коллекции и папки композиций открываются во вкладках над редактором, как в IDE; та же полоса вкладок служит датасетам и маппингам вкладки Database. Папка открывает одну вкладку-обозреватель: переход по папкам в дереве меняет её содержимое, пока вы не откроете файл. Щелчок в дереве открывает вкладку или переключает на уже открытую; активная вкладка подсвечивает свою строку в дереве. Имя файла живёт во вкладке: двойной щелчок или F2 открывает поле, Enter сохраняет, Esc отменяет. Меняется только имя, папку файл меняет в дереве; второй файл с тем же именем в той же папке не допускается. Крестик появляется при наведении, вкладку закрывают также средней кнопкой мыши и через контекстное меню (Close, Close others, Close all). Несохранённые изменения показаны точкой вместо крестика и более плотным именем; закрытие такой вкладки спрашивает, сохранить ли их. Черновик неактивной вкладки не теряется, пока вы не сохраните или не закроете её. Открытые вкладки запоминаются для каждой рабочей области, а каждая вкладка помнит свой вид: режим Visual / Code, курсор и прокрутку в Code, прокрутку и раскрытые группы в Visual. Клавиатура в полосе вкладок: стрелки и Home/End переводят фокус, Enter открывает, Delete закрывает, F2 переименовывает.

В полосе под вкладками остаются счётчик токенов, переключатель Visual / Code, отметка валидности и кнопка Save. Открытый файл показывается в одном из двух видов:

  • Visual: токены сгруппированы по типам, каждый показан бейджем: имя, вычисленное значение и запись из JSON (24px · {core.space.6-x}). Клик по группе раскрывает её. Наведение на бейдж открывает карточку токена: полный путь и тип, превью (цвет, тень, типографика или вычисленное число с подстановкой формулы, например 24px = 4px × 6), значение как в JSON и ссылки из него с файлами, где они определены. Клик по значению или по превью копирует их в буфер обмена. Если ссылка определена в нескольких файлах модов, карточка называет мод, для которого посчитано значение: выбранный в переключателе модов, иначе мод открытого файла, иначе первый мод коллекции из config.
  • Code: JSON-файл целиком с подсветкой и проверкой. Кнопка Save и Cmd/Ctrl + S сохраняют файл. Пока файл не изменён, кнопка неактивна.

Кодовый редактор после сохранения: кнопка Save неактивна, изменений нет.

Если в файле есть ошибки, над редактором появляется полоса N validation issues: раскройте её, чтобы увидеть список с путями токенов и причинами. Пока ошибки есть, сохранение из кодового вида заблокировано.

Список ошибок валидации: в группе fw указан scope, недопустимый для fontWeight.

Сохранение подтверждается ядром плагина. Если подтверждение не пришло за 20 секунд, редактор покажет причину в полосе под вкладками, а Save снова станет доступен; подробности даст команда status на вкладке Diagnostics.

Создать токен

  1. Откройте файл в визуальном виде.
  2. В панели типов нажмите нужный тип или + для остальных типов: см. Типы токенов.
  3. Заполните форму: имя в виде пути group/token, значение, при необходимости описание, scopes, code syntax, модификаторы цвета.
  4. Нажмите Create. Токен появится в группе своего типа, файл сохранится.

Существующий токен редактируется через контекстное меню бейджа или в кодовом виде. Значение можно записать числом, строкой, ссылкой на другой токен {group.token} или математикой: см. JSON-формат токенов.

Apply Tokens

Кнопка Apply Tokens в шапке привязывает токены к слоям Figma по именам: слой, свойство которого названо как токен, получает переменную или стиль. Стрелка рядом выбирает область: Selection, Page или Document. Повторный запуск восстанавливает привязки после ручных изменений, не трогая текст, свойства компонентов и замены инстансов.

Для композиций Apply создаёт и обновляет компоненты по их JSON-описанию: см. Composition. Проверить, что привязано к слою, можно на вкладке Inspect.

Экспорт и импорт

  • Export variables & styles создаёт и обновляет переменные и стили Figma по файлам токенов. Переменные получают тип Color, Number, String, Boolean, Timing или Easing, составные токены становятся стилями заливки, эффектов, текста и сеток. См. Экспорт переменных и стилей.
  • Import variables & styles делает обратное: читает переменные и стили файла Figma и записывает их в JSON. См. Импорт из Figma.
  • Collection Settings открывает config.json в удобном виде: коллекции, их режимы и файлы, порядок, ссылки на библиотеки.
  • Reset Diff-ID разрывает связь между токенами и уже созданными переменными этого файла Figma: следующий экспорт создаст переменные заново. Нужен редко, например при переносе в новый файл.

Режимы

Иконка Mode context в шапке показывает режимы коллекций и применяет их к выделению или странице: см. Режимы коллекций.

Источники файлов

Файлы токенов могут храниться внутри плагина, в репозитории GitHub или GitLab или в папке на диске. Источник переключается в футере: см. Источники токенов и синхронизация.

Рекомендуемый порядок работы

  1. Разделите примитивы и семантические токены по файлам; семантические ссылаются на примитивы.
  2. Опишите коллекции и режимы в Collection Settings.
  3. Экспортируйте переменные и стили, проверьте результат в панели Variables Figma.
  4. Применяйте токены к макетам по ходу работы, перед передачей разработчикам запустите Apply Tokens для страницы.
  5. Держите токены в Git, чтобы разработчики получали изменения из того же репозитория.

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