Дизайн система
КОНТЕКСТ
Изначально передо мной стояла задача создать UI-kit, чтобы команда могла быстрее разрабатывать дизайн и тестировать гипотезы. После создания первой версии немецкая компания CPI Technologies захотела выкупить это решение и разрабатывать на его основе как внутренние продукты, так и продавать white label своим клиентам.
МОЯ ЗОНА ОТВЕТСТВЕННОСТИ
Создание UI-kit, написание гайдов для передачи в разработку, описание дизайн-системы для дизайнеров, документация и дальнейшая поддержка и развитие дизайн-системы.
ХОД РАБОТЫ
Перед началом работы и во время я изучала все на мой взгляд лучшие дизайн системы в открытом доступе. Пользуясь и тестируя их я подмечала какие моменты неудобны для работы и что можно было бы исправить и докрутить в собственной версии. После создания ui kit, что он мог стать полноценной дизайн системой, мне потребовалось передать все наработки разработчикам. Для этого я создала систему на основе токенов, чтобы дизайн и разработка, которая велась на Tailwind, могли "говорить на одном языке".
СОЗДАНИЕ КОМПОНЕНТОВ
Основным фреймворком для создания компонентов, помимо атомарного подхода, стало создание мастер-компонента. За счёт этого можно было легче поддерживать и изменять сеты компонентов, привязанные к нему.
СИСТЕМА ЦВЕТОВ
Это моя любимая тема, поэтому будет чуть много текста:)
Цветовая система основана на дизайн-токенах и специальном алгоритме генерации палитр со значение main и градацией цветов на 6 пунктов вниз и на 2 вверх для hover и pressed состояний. Система наследования токенов обеспечивает консистентность интерфейса: достаточно изменить несколько базовых токенов, чтобы полностью обновить внешний вид продукта. Тёмная тема генерируется автоматически.
В Figma базовые токены и их производные доступны во вкладке Local Variables.
Токены делятся на два уровня:
Базовые (base) — цвета-исходники, из которых автоматически создаются тональные палитры.
Семантические (alias) — токены для продуктового использования, автоматически подстраивающиеся под светлую и тёмную темы.
При такой системе, если мы изменяем значение базового цвета обновляется палитра, за ней — семантические токены, и в итоге весь интерфейс. При необходимости токены можно редактировать на любом уровне отдельно.
ИТОГ
Сейчас на основе этой системы успешно работают минимум три продукта.
Спасибо, что прочитали! Если показалось интересным, может, нам стоит поработать вместе? Напиши мне!