Дизайн-система БКС
Задача
Создать масштабируемую дизайн-систему для продуктов финансовой группы БКС
Моя роль
Анализ других дизайн-систем
Анализ текущих решений в МИ и банкe, чтобы синхронизировать паттерны и создать максимально гибкие компоненты с учетом краевых кейсов
Проектирование компонентов и анимаций
Написание гайдлайнов по компонентам
Передача компонентов в разработку и авторский надзор
Проведение воркшопов для продуктовых дизайнеров по использованию дизайн-системы
Ревью макетов продуктовых дизайнеров
Трудности
У веба и мобильного приложения Мира Инвестиций (МИ) уже существовали два независимых UI-кита.
Провели анализ двух UI-китов, составили сводную таблицу схожих по использованию компонентов, изучили их максимальное наполнение. В новой дизайн-системе слили два существующих решения в одно, но гибкое
У мобильного приложения были расхождения в UI-ките между дизайном и кодом.
На протяжении всех этапов работы вели тесное взаимодействие с разработкой. Сверялись с текущими реализациям в коде на двух платформах (iOS, android) и по мере необходимости дорабатывали компоненты в фигме или коде, чтобы добиться синхронизации
Дизайнеры привыкли к максимальной свободе, иногда нарушая консистентность дизайна.
Истоки этой трудности растут из того, что в предыдущем UI-ките не было описания компонентов, и не все пропсы были вынесены. Дизайнеры, например, выключали ненужные элементы в слоях. Мы ввели демо, где рассказывали о новых компонентах. Начали писать к каждому компоненту подробную спецификацию, понятную как дизайнерам, так и разработчикам. Придумали эмодзи-кодировку для пропсов в компонентах
Из-за специфики проекта, наряду с базовыми компонентами существует множество компонентов с узким функционалом.
Выделили такие компоненты в категорию продуктовых и отдали разработку и поддержку в руки продуктовых команд. Команда дизайн-системы оказывает помощь в сборке компонентов
Токены
Токены имеют семантически нейтральные названия и могут применяться к любому продукту. Внешний вид компонентов легко меняется при помощи изменения значений. Токены выгружаются в виде JSON, и изменения сразу же применяются на проде
Слоты
Для наибольшей гибкости многие компоненты собраны с использованием слотов — наполнение можно менять без детача. В коде это работает так же
Кросс-платформенные компоненты
Мы добились синхронизации между платформами: один и тот же компонент используется для всех платформ (iOS, android и web).
Для верстки адаптивных макетов дизайнер может переключаться между платформами с помощью всего лишь одной настройки.
Такой подход очень сильно сокращает время проектирования и позволяет быть уверенными, что функционал компонентов на всех платформах соответствует фигме
Спецификации
Мы пишем очень подробные спецификации, чтобы их мог понять каждый новый член команды. Будь то разработчик, аналитик или дизайнер. Для некоторых компонентов у нас по несколько спецификаций: две для разработчиков (под мобильные и веб платформы), одна для дизайнеров (например, как кастомизировать баннеры на уровне фигмы).
Прозрачность
Мы убеждены в том, что дизайн-система — это самостоятельный продукт. Поэтому мы соблюдаем прозрачность между нашей командой и пользователями продукта.
В этом нам помогают:
Ведение версионирования в фигме: любой может посмотреть, что и когда менялось
Отслеживание и отображение статусов компонентов в коде: от начала разработки, до тестирования
Отдельный чат поддержки, где наша команда отвечает на вопросы продуктовых команд
Итоги
Внедрение дизайн-системы в Мир Инвестиций позволило сократить time-to-market благодаря:
Увеличению скорости проектирования сценариев в фигме
Ускорению разработки продуктовых сценариев в коде
Также, после внедрения дизайн-системы в другие продукты финансовой группы ожидается улучшение консистентности между продуктами