Инструменты для токенов: Style Dictionary
Преобразуйте и распространяйте токены дизайна между платформами с помощью инструмента Style Dictionary.
«Инструменты для токенов: Style Dictionary» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое Style Dictionary
Style Dictionary — инструмент сборки с открытым исходным кодом от Amazon, который преобразует исходный JSON с токенами в форматы для разных платформ: пользовательские свойства CSS, переменные SCSS, константы Swift для iOS, XML для Android и модули JavaScript/TypeScript — всё из единого источника истины.
Структура проекта
Организуйте токены в каталоге tokens/ в виде файлов JSON или JSON5. Style Dictionary автоматически объединяет все файлы. Разделяйте файлы по категориям: tokens/color.json, tokens/spacing.json, tokens/typography.json.
Формат JSON токенов
Каждый токен представляет собой вложенный объект с ключом value и необязательными полями type, description и comment. Style Dictionary преобразует вложенную структуру в имена с точечной нотацией для выходных файлов.
<pre class="json-block">{
"color": {
"brand": {
"primary": { "value": "#3b82f6", "type": "color" }
}
}
}</pre>Файл конфигурации
Файл config.json определяет источники (файлы токенов), платформы (веб, iOS, Android) и преобразования и форматы для каждой платформы. Каждая платформа может применять разные преобразования и создавать файлы в разных форматах.
<pre class="json-block">{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "dist/css/",
"files": [{"destination": "variables.css", "format": "css/variables"}]
}
}
}</pre>Преобразования
Преобразования изменяют значения токенов во время сборки: color/css форматирует цвета как шестнадцатеричные значения, size/rem преобразует px в rem, а name/cti/kebab создаёт имена в формате kebab-case из вложенной структуры category-type-item.
Форматы
Форматы определяют содержимое выходного файла. Встроенные форматы: css/variables создаёт блок CSS :root, scss/variables создаёт переменные SASS, а javascript/module экспортирует объект JS. Пользовательские форматы позволяют задать любую необходимую структуру вывода.
Ссылки между токенами
Ссылайтесь на другие токены с помощью синтаксиса фигурных скобок: {"value": "{color.brand.primary}"}. Style Dictionary разрешает ссылки во время сборки, подставляя конкретные значения. Ссылки создают сопоставление алиасов с глобальными токенами.
Пользовательские преобразования
Зарегистрируйте пользовательские преобразования для специфических потребностей проекта: удаляйте альфа-канал из цветов, преобразуйте значения прозрачности из инструмента дизайна, добавляйте префиксы браузерных поставщиков. Пользовательские преобразования встраиваются в конвейер сборки так же, как встроенные.
Запуск сборки
Выполните npx style-dictionary build или добавьте эту команду в сценарий сборки npm. Выходные файлы помещаются в настроенные каталоги buildPath. Зафиксируйте сгенерированные файлы в репозитории или создавайте их во время сборки в CI — оба подхода распространены.
Интеграция с Figma
Tokens Studio for Figma синхронизирует JSON с токенами с репозиторием GitHub. Style Dictionary запускается в CI при изменении JSON и автоматически создаёт обновлённые CSS-файлы и файлы для платформ. Изменения дизайна передаются в код без ручного копирования и вставки.
Версионирование токенов
Публикуйте пакет токенов в npm с версиями. Пользователи фиксируют нужную версию и обновляют её осознанно. Журналы изменений документируют добавленные, устаревшие и удалённые токены. Семантическое версионирование сообщает о несовместимых изменениях и безопасных обновлениях.
Проверка знаний
Какую роль играет преобразование в Style Dictionary?
Итоги
Style Dictionary преобразует единый исходный JSON с токенами в форматы для конкретных платформ с помощью настраиваемых преобразований и форматов. Он обеспечивает синхронизацию токенов из Figma с кодом, согласованность между платформами и версионируемые пакеты токенов, которые команды могут осознанно подключать и обновлять.
Часто задаваемые вопросы
Урок «Инструменты для токенов: Style Dictionary» бесплатный?
Да — полный текст урока «Инструменты для токенов: Style Dictionary» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Инструменты для токенов: Style Dictionary»?
Преобразуйте и распространяйте токены дизайна между платформами с помощью инструмента Style Dictionary. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Инструменты для токенов: Style Dictionary»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое токены дизайна
- Соглашения об именовании токенов
- Мульт##брендовая темизация с переменными CSS
- Инструменты для токенов: Style Dictionary