Дизайн система в SpatialChat

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

После первого года существования продукта понадобилась ДС, чтобы соединить два лейаута: дашборд и спейс. Раньше был только ui kit для спейса со старыми компонентами. Когда возник запрос в создании дашборда, компоненты спейса не закрывали потребности в новом функционале, тогда появилась возможность обновить визуальный язык и создать единую ДС. При создании новых компонентов для дашборда оставили только цвета из старого ui kit, а все остальные стили (скругления, тени, шрифты) были изменены и добавлены новые элементы.
Цель единой ДС состояла в объединении дашборда и спейса, чтобы использовать одни и те же компоненты и сохранить приемственность и консистентность. Это поможет не только упростить работу разработку в будущем, но еще и сделать дешевле процесс создания новых фич. ДС позволит автоматизировать процессы, а благодаря итеративности можно будет легко и быстро внедрить небольшие изменения и таким образом шаг за шагом улучшать продукт. Новым сотрудникам продуктовой команды будет проще выполнять задачи, не теряя времени на подготовку.

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

Основной недостаток компонентного подхода — он трудоёмкий. Разработка компонентов требует времени, внимания и усилий. Когда мы проектировали первую версию ДС вышло новое обновление фигмы, которое позволяло уменьшить количество вариантов. Так мы решили пересмотреть существующую ДС и удалить лишние варианты, в итоге нам удалось создать более компактную ДС.

Перед добавлением компонента в ДС мы задавали ряд вопросов, например:

Мы выработали основные правила при создания ДС:

В нашей дизайн системы мы поделили элементы на токены, атомы и молекулы.

Токены

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

В нашей ДС в качестве токенов мы используем: иконки, текст, лого.

Иконки

Мы используем иконки двух размеров 24 и 16рх. Для больших иконок обводка составляет 2 рх, для маленьких — 1,5 рх. Для создание иконок мы используем сетку, отступы должны быть с каждой стороны по 1-2рх. Мы используем линейный стиль при создании иконок.

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

Молекулы

Это сложные компоненты — молекулы, которые включают в себя другие компоненты — атомы. К таким компонентам относят карточки, меню, списки, таблицы, футер.

В итоге у нас получилась такая структура:

Шрифты

В основной ДС мы используют шрифт Euclid Circular B, потому что его буквы легко читаются в любом размере, а в самом спейсе используем шрифт Inter. Самый маленький размер для шрифта 12рх — используем для подписей, а самый большой для заголовков — 68рх.

Цвета

В ДС мы разработали цвета для темной и светлой темы. Мы используем цветовую модель HSL, которая оперирует такими понятиями: тон (H) , насыщенность (S) и светлота (L) .

В фигме мы создали папку Design System, в которой находится 10 файлов. Цвета, тени, сетка, иконки находятся в отдельных файлах, это удобнее для подключения стилей. Компоненты (токены, атомы, молекулы) находятся в отдельном файле “Сomponents” на разных страницах.

Нам удалось создать ДС, используя методологию атомарного дизайна за год. В настоящее время при добавлении нового функционала в дашборде мы используем ДС, а для задач в спейсе мы используем старый ui kit, так в спейсе часть интерфейса в новом дизайне, а часть в старом. В дальнейшем мы планируем использовать единую ДС для всех задач.