0Pricing
Frontend Academy · Урок

Токены дизайна со Style Dictionary

Определяйте токены цветов, отступов и типографики в JSON, преобразуйте их с помощью Style Dictionary в переменные CSS, константы JS или форматы iOS/Android

«Токены дизайна со Style Dictionary» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое токены дизайна

Токены дизайна — это именованные примитивные значения дизайн-системы: цвета, отступы, размеры шрифтов, радиусы границ и тени. Это единый источник истины — каждый компонент получает стили из них.

Почему токены важны

Токены отделяют решения о дизайне от реализации. Измените color.primary с синего на зелёный один раз — и обновится каждый использующий его компонент. Кроме того, токены позволяют применять одну и ту же дизайн-систему в веб-приложениях, iOS и Android.

Хранение токенов

Храните токены в JSON или YAML — это нейтральный формат, который могут использовать инструменты на разных платформах. Чаще всего используется JSON.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (Amazon) — фактический стандарт среди инструментов сборки токенов дизайна. Он считывает токены и преобразует их в несколько выходных форматов: переменные CSS, SCSS, константы JS, iOS Swift и Android XML.

npm install -D style-dictionary

Настройка

Создайте style-dictionary.config.js, описав входные токены и выходные платформы.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

Запуск сборки

Запустите CLI, чтобы сформировать файлы для всех платформ.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

Сформированный вывод CSS

Переменные CSS с согласованной схемой именования (kebab-case с пространством имён).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

Сформированный вывод JS

Объект JS для использования в коде JS/TS (конфигурация Tailwind, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

Соглашения об именовании токенов

Используйте семантические имена (color.primary), а не буквальные (color.blue-500). Семантические токены позволяют менять значения без переименования. Двухуровневая система: буквальная палитра (blue-500) → семантический псевдоним (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

Темизация с помощью токенов

Создавайте сборки для нескольких платформ с разными входными данными, чтобы поддерживать темы (светлую и тёмную): имена остаются одинаковыми, а значения меняются.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

Категории токенов

Распространённые категории: color, spacing, typography (font-family, size, line-height, weight), border (radius, width), shadow, transition (duration, easing), z-index и breakpoint.

Инструменты для реестра токенов

Помимо Style Dictionary существуют Tokens Studio (плагин Figma), Specify и Supernova. Они позволяют дизайнерам управлять токенами в Figma и автоматически синхронизировать их с кодовой базой.

Быстрая проверка

Какое главное преимущество даёт использование токенов дизайна со Style Dictionary?

Итоги: токены дизайна

Токены — это именованные примитивные значения (цвет, отступы, типографика), единый источник истины для дизайн-системы. Храните их в JSON. Style Dictionary преобразует их в переменные CSS, JS, iOS и Android. Используйте семантические имена (primary), а не буквальные (blue-500). Два уровня: палитра → семантический псевдоним. Темы создаются отдельными сборками. Синхронизация с Figma выполняется через Tokens Studio.

Часто задаваемые вопросы

Урок «Токены дизайна со Style Dictionary» бесплатный?

Да — полный текст урока «Токены дизайна со Style Dictionary» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Токены дизайна со Style Dictionary»?

Определяйте токены цветов, отступов и типографики в JSON, преобразуйте их с помощью Style Dictionary в переменные CSS, константы JS или форматы iOS/Android Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Токены дизайна со Style Dictionary»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Storybook: истории, элементы управления и документация
  2. Токены дизайна со Style Dictionary
  3. Версионирование и публикация в npm
  4. Использование дизайн-системы
← Назад к Frontend Academy