Токены в код
Как получить из токенов готовый код прямо в плагине: вкладка Tokens → Code в окне Download, проекты и группировка коллекций, платформы CSS, SCSS, SwiftUI, UIKit, Kotlin и XML, настройки и предпросмотр. Когда нужен Transformer CLI.
Токены превращаются в код двумя способами. Прямо в плагине: окно Download, вкладка Tokens → Code, результат скачивается ZIP-архивом. Или на компьютере разработчика и в CI через утилиту Transformer: те же форматы плюс манифест, повторяемые сборки из репозитория.
| Способ | Платформы | Для чего |
|---|---|---|
| Плагин, Download → Tokens → Code | CSS, SCSS, SwiftUI, UIKit, Kotlin, XML | Быстро отдать код разработчику, проверить именование |
| Transformer CLI | CSS, SCSS, Swift, UIKit, Kotlin, XML, manifest | Сборка в проекте и CI, следит за изменениями |
Экспорт из плагина
- В футере нажмите Export to computer. Откроется окно Download.
- Перейдите на вкладку Tokens → Code.
- Отметьте проекты, выберите платформы, при необходимости задайте префикс и параметры.
- Проверьте список файлов в Output Preview и нажмите Export to disk. Плагин сохранит архив
tokens-transformed.zip.
Вкладка Tokens → Code: список проектов с числом режимов и файлов.
Проекты и группировка коллекций
Если в config.json описаны коллекции и режимы, плагин показывает проекты: каждый проект собирается из своих режимов и файлов, например WUI, CUI, STUI. Снимите галочки с ненужных проектов.
Collection Grouping и начало списка платформ.
Секция Collection Grouping решает, куда попадает каждая коллекция: Merge вливает её в общие файлы проекта, Separate выносит в отдельную папку. Значок папки рядом с коллекцией задаёт ей собственную папку в архиве.
Без валидного config.json плагин делает плоский экспорт: tokens.css, tokens.scss, tokens.swift, tokens.uikit.swift, tokens.kt и папки ресурсов XML.
Платформы и префикс
Target Platforms: CSS, SCSS, SwiftUI, UIKit, Kotlin, XML. Поле Prefix с примером результата.
| Платформа | Что получается |
|---|---|
| CSS (Web) | Пользовательские свойства --token-path в .css |
| SCSS (Web) | Переменные $token-path в .scss |
| SwiftUI (iOS) | Константы Swift в .swift |
| UIKit (iOS) | Константы UIKit в .uikit.swift |
| Kotlin (Android) | Константы Kotlin в .kt |
| XML (Android) | Ресурсы values и drawable: цвета, размеры, строки, простые drawable |
Prefix добавляется ко всем именам, например ds даёт --ds-color-primary.
Параметры
Options и Output Preview: дерево файлов, которые попадут в архив.
| Параметр | Что делает |
|---|---|
| Resolve aliases | Включено: ссылки заменяются конечными значениями, удобно для мобильных платформ. Выключено: ссылки сохраняются, например var(--other-token) в CSS |
| Split effects (CSS) | Тени и размытия выводятся отдельными переменными, а не одним значением |
| Include descriptions | Описания токенов попадают в комментарии кода |
Output Preview показывает папки и файлы архива до экспорта.
Именование
Имена строятся из пути токена: color/brand/primary даёт --color-brand-primary, $color-brand-primary, colorBrandPrimary и @color/color_brand_primary в зависимости от платформы. Если у токена задан Code Syntax, он имеет приоритет: ключ Web для CSS и SCSS, iOS для Swift, Android для Kotlin и XML. См. Scopes и Code Syntax.
Код Swift для SwiftUI и UIKit помечен Sendable и подходит для проектов со строгой конкурентностью Swift 6.
Какие токены попадают в код
Все переменные и стили: цвета, размеры, отступы, радиусы, прозрачность, строки, булевы, типографика, тени, размытия, эффекты, стекло, заливки и градиенты, а также длительности, кривые и easing. Не экспортируются template, composition, grid и custom: о них плагин сообщает в диагностике архива.
Android XML намеренно ограничен нативными ресурсами: сложные токены, которым нет соответствия в ресурсах, пропускаются с пояснением.
Transformer CLI
Для повторяемых сборок из репозитория используйте утилиту Transformer: она читает те же файлы и config.json, настраивается YAML-файлом и умеет следить за изменениями.
npm install --save-dev @sxl-studio/token-transformer
npx sxl-transform init
npx sxl-transform sync
Полное описание команд, конфигурации и форматов: Transformer.
Если что-то не работает
| Что случилось | Что делать |
|---|---|
| Кнопка Export to disk неактивна | Выберите хотя бы один проект и одну платформу |
| В архиве нет части токенов | Проверьте диагностику в архиве: типы template, composition, grid и custom не экспортируются, а неразрешённые ссылки пропускаются |
| Имена не такие, как в Dev Mode | В Dev Mode показывается Code Syntax из $extensions; задайте его для нужных токенов, и код получит те же имена |
| Нет проектов, только плоский список | В папке токенов нет валидного config.json. Настройте коллекции в Collection Settings |