Разработка дизайн-системы

Процесс создания дизайн системы

Создание дизайн системы затрагивает многие отделы компании и не ограничивается только дизайном. Нужно понимать, что дизайн система - это действительно система, со своими правилами, логикой, определенной выборкой пользователей. Она влияет как на внутренние процессы компании, так и на отношение к продукту/сервису ее непосредственных клиентов.

Дизайн интерфейса

В первую очередь дизайн система строится на существующих элементах интерфейса, которые есть в дизайне. Для удобного использования и нахождения этих элементов в исходниках создаётся не просто UI kit, а разобранные на категории элементы. Такой подход соответствует подходу Atomic Design, при котором детали интерфейса показываются в нескольких вариантах: самый простой вид, вид элемента, состоящего из нескольких деталей, функциональный блок из нескольких элементов, шаблоны и страницы.

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

Инструкции и гайдлайны

Следующим этапом является написание документации по правилам использования элементов. В этой документации содержится как общие рекомендации по компоновке элементов интерфейса, так и детальная спецификация с описанием логики. Например, описывается процесс использования фильтра: “если вы нажмете на чекбокс какой-либо опции, страница перезагрузится автоматически, а на кнопке “показать” появится кол-во отобранных вариантов”. В документации также можно найти описание поведения всех динамических блоков и анимаций, ссылки на живые примеры реализации, готовые плагины.

Инструменты для создания дизайн системы

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

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