Вопрос с собеседования · Frontend

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

MiddleАрхитектура фронтенда
Ещё спрашивают так:
  • Как сделать тёмную тему через CSS-переменные?
Коротко

Токены — именованные значения дизайна: цвета, размеры шрифтов, отступы, радиусы, тени, длительности анимаций. Есть базовые (blue-600 = #2563eb) и семантические (color-accent, color-text-muted, space-md), компоненты используют только семантические. Токены хранят в одном источнике (JSON, Figma Variables), генерируют CSS-переменные и константы для платформ. Тема (тёмная, бренд партнёра) — это другой набор значений тех же семантических токенов.

  • Семантические имена позволяют менять тему без правки компонентов
  • Токены синхронизируют дизайн и код
  • Ограниченный набор отступов и цветов — меньше «почти одинаковых» значений

Подробно

:root { --color-bg: #fff; --color-text: #111; --space-md: 16px; }
[data-theme="dark"] { --color-bg: #0b0d14; --color-text: #e7e9f5; }
.card { background: var(--color-bg); padding: var(--space-md); }

Что хотят услышать

  • Базовые и семантические токены.
  • Единый источник и CSS-переменные.
  • Темы через смену значений.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Токены — это ключи авторизации дизайнеров в Figma
  • ✗Компоненты должны брать базовые цвета вроде blue-600 напрямую, а семантические токены лишь мешают
  • ✓Именованные значения дизайна из единого источника; тема — другой набор семантических токенов
  • ✗Тёмная тема требует переписать все компоненты, токены тут не помогают никак

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования