Что такое дизайн токен? Краткий экскурс с примерами
Давайте разберём, что такое дизайн-токены и как их использовать. Я постараюсь объяснить максимально понятно, как если бы мы сидели в кафе и обсуждали это за чашечкой кофе.
Поскольку интернет уже полон исчерпывающими материалами по теме «что такое дизайн-токен», сделали краткое саммари для тех, кто еще не в теме, а углубляться и «читать много букав» (с) – лень 👀
Данная статья является дополнением к предыдущему материалу про то, как присваивать имена классам, дивам и т.д.
Кому будет полезна эта информация?
Дизайнерам: если вы уже слышали про токены, но не понимаете, о чем идет речь.
Разрабам: вы шарите за код, но дизайнеры просят от вас использования этих самых токенов.
Что такое дизайн-токен?
Представьте, что у вас есть большая коробка с инструментами, и в этой коробке есть всё для создания дизайна: цвета, шрифты, размеры кнопок, отступы, тени и так далее. Эти элементы называются дизайн-токены (Design Tokens).
Проще говоря, дизайн-токены — это небольшие кусочки информации, описывающие все визуальные аспекты интерфейса. Они нужны чтобы в разных частях продукта сохранять единообразие. Например, если вы используете какой-то определённый цвет для кнопок, дизайн-токен поможет не запутаться и использовать один и тот же цвет везде.
Зачем нужны дизайн-токены?
Дизайн-токены упрощают жизнь дизайнерам и разработчикам. Они:
- Обеспечивают согласованность: Когда у вас есть набор токенов, вы всегда знаете, что используете правильные цвета, шрифты и размеры.
- Упрощают поддержку: Если необходимо поменять что-то в дизайне (например, основной цвет бренда), вы меняете значение одного токена, а изменения автоматически применяются ко всем элементам, где он используется.
- Помогают адаптировать дизайн под разные платформы: Например, нам нужно создать мобильную версию сайта. С помощью дизайн-токенов мы можем легко настроить значения под мобильный интерфейс.
Как выглядит дизайн-токен?
Обычно дизайн-токены представляют собой ключи и значения, записанные в виде JSON-файла. Вот как это может выглядеть:
{
«color-primary»: «#3498db»,
«font-size-base»: «16px»,
«spacing-small»: «8px»
}
Здесь:
color-primary — основной цвет
font-size-base — базовый размер шрифта
spacing-small — маленький отступ
Как использовать дизайн-токены?
Дизайн-токены можно использовать разными способами в зависимости от платформы и инструментов, которые вы используете. Вот несколько шагов:
- Создание токенов: На начальном этапе дизайнеры и разработчики создают список всех элементов, которые они хотят стандартизировать. Это могут быть цвета, шрифты, размеры, тени и т. д. Все эти элементы заносятся в JSON-файл или другую удобную сборку.
- Интеграция в код: Токены можно использовать в коде как переменные. Например, в CSS или SASS можно подключить файл с токенами и использовать их для стилизации элементов. Это выглядит так:
.button {
background-color: var(—color-primary);
font-size: var(—font-size-base);
padding: var(—spacing-small);
}
- Поддержка и обновление: Если нужно изменить, скажем, основной цвет, вы просто меняете его значение в файле с токенами. Все элементы, которые используют этот токен, автоматически обновятся.
Пример использования design tokens
Допустим, у нас есть сайт, где основной цвет — синий. Но затем бренд решил сменить цветовую палитру на зелёную. Если дизайн-токены настроены, мы просто меняем значение токена color-primary с синего на зелёный. Весь сайт сразу же обновится, и мы не пропустим ни одной кнопки или текста, где использовался старый цвет.
Для лучшего понимания, представим:
- Дизайнер создаёт токены: Цвета, шрифты, отступы и т. д.
- Токены заносятся в JSON или другой формат.
- Токены используются разработчиками: Подключаются к CSS, коду на JS, в компонентах.
- При изменении дизайна: Меняем токены, и обновления применяются ко всему проекту.
Кому и зачем стоит их использовать
Дизайн-токены будут невероятно полезны при работе с большими проектами и командами, т.к. позволяют быстро и легко вносить изменения, сохраняя единый стиль во всех элементах интерфейса. Их можно интегрировать в системы сборки (Webpack или Gulp), либо использовать в CSS-препроцессорах (SASS, LESS и пр.)
Если вы занимаетесь разработкой небольших проектов — вам не нужны дизайн токены.
Но ситуация меняется, когда:
- Мы говорим о создании нескольких приложений и сервисов, и меж ними нужно соблюсти согласованность друг с другом, единый вид;
- Планируется темезация – создание темной или светлой темы для приложения;
- Вы проектируете кастомное white label решение, которое будет настраиваться под каждого заказчика индивидуально.