История про UI-kit и CDS
Сегодня мы расскажем вам историю о том, как мы жили с UI-kit и как изменилась разработка продуктов с появлением CDS.
Жизнь с UI-Kit
Ниже мы рассматриваем наш UI Kit, все совпадения случайны.
Вводная дизайнеру в первый рабочий день:
– Используй только компоненты ui-kit, они есть вот в этом файле. Придумывать дополнительно ничего не надо.
Реальность:
– Делаю макет с использованием библиотеки дизайнеров.
– Передаю в разработку.
– Получаю совершенно другой результат. Начиная от несоответствие отступов, скруглений, цветов и заканчивая тем, как работает. Постоянные ошибки в компонентах, куча вариаций (одних кнопок разновидностей штук 10 по продукту).
– Иду к разработчику, примерно такой диалог:
Дизайнер: Почему не как на макете?
Разработчик: У нас есть UI kit со стандартными элементами и мы все оттуда берем, видимо не все компоненты синхронизированы с библиотекой в скетче.
Дизайнер: Но он же криво работает, и элементы выглядят не как на макетах, и отступы везде разные.
Разработчик: Да, есть несоответствия. Но UI-kit надо поддерживать, а у нас нет таких ресурсов. Ты можешь создать задачу на эти ошибки, но в бэклоге уже 275 задач на доработку и исправление, и ими никто не занимается. UIKit единственный и общепринятый источник компонентов в корпоративном стиле. Поэтому рекомендовано использовать его. Хоть и выглядит как г…о.
Дизайнер: Но с такими контролами интерфейс не будет нормально работать и мы не сможем проверить идею.
Разработчик: Ну, мы можем закастомить это под свой продукт.
Дизайнер: О, круто, давай.
И так появляется еще один вариант знакомых компонентов, но в рамках библиотеки конкретного продукта.
Если в вашей компании ведутся подобные разговоры, то у вас точно не дизайн-система.
Жизнь с дизайн-системой
Вводная дизайнеру в первый рабочий день:
– Используй компоненты из библиотеки CDS, если есть вопросы, смотри в документации, в ней есть примеры с демо и описаны правила использования.
Реальность:
– Делаю макет с использованием библиотеки дизайн-системы.
– Передаю в разработку
– Получаю результат, соответствующий макету.
А теперь серьезно
В таблице ниже подробно приведены примеры проблем UI-kit, с которыми мы столкнулись в B2B-Center, и их решения с помощью CDS, которые реально работают на практике каждый день.
Заключение
Таким образом, дизайн-система — не только набор компонентов, но и процесс создания и обновления этих компонентов, единое «место правды» при создании продуктов компании. В следующих статьях мы подробнее расскажем о процессе создания CDS, ее строении и о том, как компоненты попадают в библиотеку.
