logo

Дизайн-токены

Что это такое
Использование в дизайне
Токены для разработки
Тематизация
Адаптивность

Что это такое

Дизайн-токены — это набор базовых переменных визуального языка — отступы, цвета, типографика, стили объектов, анимация — представленный в виде данных. В них цвет представляется как значение RGB, прозрачность как число, анимация как координаты Безье. Токены используют вместо жестко запрограммированных значений, чтобы было легко управлять визуальным стилем и обеспечивать единство во всех продуктах.

Использование в дизайне

Мы используем общий открытый репозиторий с токенами VKUI. Дизайн-токены интегрированы в наши библиотеки компонентов и UI-киты. Они охватывают разные платформы, цветовые темы, состояния компонентов и многое другое. Название цветов и типографики в наших библиотеках в Figma соответствуют названию токена в репозитории. Это упрощает разработку: например, если изменить цвет в репозитории, он изменится одновременно в разных продуктах.
VKUI Tokens documentation
Токены для продуктов VK
Благодаря токенам мы поддерживаем и развиваем сразу темную и светлую темы интерфейса. Используя Variables в Figma переключать темы очень просто.

Токены для разработки

Для описания токенов используется TypeScript. Дизайн-токены собраны в один npm-пакет для быстрой установки и подключения к проекту. Генератор позволяет экспортировать токены в разных форматах: scss, less, css in JS и т.п.

Тематизация

Разные продукты используют свои темы оформления. Любая тема наследуется от базовой, но меняет значения некоторых переменных. Например, есть отдельные темы для продуктов productivity и media, но все они основаны на базовой теме.
Такой подход помог в разработке темной темы интерфейса. Токены темной темы тонируют цветовые токены базовой темы.

Адаптивность

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