Как с помощью дизайн-токенов наша команда оптимизировала и ускорила процессы работы

Внедрение дизайн-токенов в рабочий процесс позволило нашей команде оптимизировать, ускорить многие этапы разработки интерфейсов.

Проблемы, решенные с помощью дизайн-токенов:

Кейс 1: Адаптивный дизайн

Проблема

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

Для решения этой проблемы мы создали пресеты с дополнительными брейк-пойнтами Дизайнеры использовали эти пресеты как шаблоны, вручную изменяя параметры макета под нужные брекпоинты. Однако это не обеспечивало легкость в поддержке и обновлении адаптивного дизайна и не исключало ошибок при использовании правильных размеров компонентов и текста среди дизайнеров. Остальные участники команды (аналитики, тестировщики) не смогли проверить правильности решений, так как не было четких правил использования элементов интерфейса на различных устройствах, а разработчики каждый раз верстали макеты заново, не имея синхронизации в коде.

Решение с использованием дизайн-токенов

С появлением дизайн-токенов мы смогли решить проблемы разработки макетов. Мы создали два набора переменных для десктопа и мобильных устройств (resp: desk и mob), а внутри – переменные для высоты и ширины (width и height). В каждой переменной прописаны значения для различных брекпоинтов (desk: 1920х880, 1440х880, 1280х520, 1024х568, tab: 768х1024, 600х900 и mob 430х932, 360х568). Работая с макетом, дизайнер просто меняет значение на панели инструментов, и макет автоматически адаптируется под нужный размер экрана, обеспечивая гибкость и консистентность.

Переключая токены, мы также получаем:

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

• Изменяющиеся отступы и паддинги для различных экранов
• Изменяются размеры компонентов

Что также обеспечивает интерфейсу единообразие, легкость в обновлении и синхронизацию со всей командой

Эти токены применяются ко всем макетам, что упрощает процесс обновления стилей: изменение значения токена автоматически обновляет все связанные элементы.

Результат

• Упрощенное управление стилями для различных устройств.
• Легкость в поддержке и обновлении адаптивного дизайна.
• Консистентность визуального восприятия на всех экранах.
• Единообразие отступов и паддингов во всем интерфейсе.
• Снижение риска ошибок и повышение качества дизайна.

Кейс 2: Поддержание цветовой темы

Проблема

Выбор цветов для различных ситуаций может быть сложным и приводить к несоответствиям в интерфейсе, особенно в крупных проектах с множеством компонентов и дизайнеров. Новым сотрудникам неясно, какое цветовое решение использовать в том или ином месте без четких правил, и каждый дизайнер может иметь свое видение, что нарушает единообразие интерфейса.

В нашей дизайн-системе не используется, но часто применяется темная и светлая тема. Это трудоемкий процесс. Без дизайн-токенов изменение цветов и стилей для каждой темы требует большого количества ручных правок, что повышает риск ошибок и не консистентности.

Решение с использованием дизайн-токенов

Определение дизайн-токенов для цветов в каждом компоненте позволяет иметь не просто палитру цветов, а привязывать нужный токен цвета к компонентам. Например, токен для фона и бордер-радиуса, текста, иконок и тд.

Для темной и светлой темы с помощью дизайн-токенов можно централизованно управлять цветовой палитрой. Определив токены для основных цветов и использовав их в стилях компонентов, можно легко переключаться между темами, меняя значения токенов одним кликом.

Результат

• Единообразие цветов во всем интерфейсе.
• Упрощение процесса обновления стилей: изменение значения токена автоматически обновляет все связанные элементы.
• Снижение количества ошибок и повышение консистентности.
• Легкость в обновлении тем: достаточно изменить значения токенов, и изменения автоматически применяются ко всем связанным элементам.

Заключение

Внедрение дизайн-токенов в рабочий процесс помог нашей команде достичь высокой консистентности, гибкости и эффективности в разработке интерфейсов.

Независимо от задачи – будь то управление темами, адаптивным дизайном, отступами, размерами шрифтов или цветами – дизайн-токены обеспечивают централизованное управление стилями, упрощая процесс разработки и поддержания качественного пользовательского опыта.