Результат
Контекст
Дизайн-система Mindbox развивалась параллельно с редизайном продукта. Часть компонентов уже существовала, но не соответствовала новому визуальному языку или не покрывала актуальные сценарии. Других паттернов в системе ещё не было.
Работая над продуктовыми задачами, я обновлял существующие компоненты и добавлял новые решения, которые можно было использовать в разных разделах. В этом кейсе собрана часть таких изменений, а не вся работа над дизайн-системой.
Для каждого решения нужно было закрыть конкретный сценарий, продумать состояния и проверить, что компонент не зависит от одного экрана.
Почему проект был важен
Без общих правил одинаковые элементы могли выглядеть и работать по-разному. Это усложняло проектирование, разработку и дальнейшее развитие интерфейса.
Дизайн-система должна была дать команде единый язык и сократить количество решений, которые приходится принимать заново.
Мой вклад
- Анализировал существующие компоненты и сценарии, которые они не покрывали.
- Обновлял базовые контролы под новый визуальный язык и продуктовые требования.
- Проектировал недостающие паттерны на основе реальных задач.
- Определял варианты, размеры, состояния и поведение.
- Проверял решения в макетах конструктора и других разделов.
- Описывал назначение компонентов и правила использования.
Подробнее про компоненты
Обновил кнопку и группу кнопок
Проблема
За несколько лет использования реализация на фронтенде и компоненты в дизайн-системе разошлись: в продукте появились новые состояния и кастомные варианты, которые нигде не были описаны. Нужно было собрать реальные сценарии и восстановить единую иерархию действий.
Решение
Я проверил все места использования кнопок в продукте, нашёл кастомные реализации и учёл их в обновлённых компонентах. Параллельно пересобрал свойства в Figma, чтобы состояния и варианты настраивались предсказуемо, без ручных правок.
Для кнопок я определил типы по приоритету: Primary, Secondary, Tertiary и Negative, размеры S, M и L, варианты с иконками и основные состояния. Отдельно описал правила названий и количество Primary-действий на экране.
Для групп кнопок зафиксировал порядок: основное действие располагается слева, дополнительные – справа. Ограничил количество кнопок, определил размеры S и M и поведение группы при прокрутке в pop-up, popover, drawer и других контейнерах.
Что изменилось
Иерархия и порядок действий остаются последовательными в разных сценариях продукта.
Показать макеты в Figma
Обновил Input
Проблема
За несколько лет использования реализация Input на фронтенде разошлась с компонентом в дизайн-системе: появились новые состояния и кастомные варианты полей, которые нигде не были описаны. Нужно было собрать реальные сценарии и пересобрать Input так, чтобы он покрывал их одним компонентом.
Решение
Я проверил все места использования Input в продукте, разобрал кастомные реализации и перенёс необходимые сценарии в обновлённый компонент. В Figma упорядочил варианты и свойства, чтобы сложные конфигурации собирались через настройки компонента, а не ручными изменениями.
Я предусмотрел label сверху, слева и вариант без label, prefix и suffix, иконки, inline-select, дополнительное действие и текст ошибки. Также описал правила ширины и расстояния до связанных контролов.
Suffix можно изменять прямо в интерфейсе – например, подставлять px, % или другие единицы измерения, поэтому один компонент подходит для разных числовых параметров.
Также я добавил изменение значения перетягиванием иконки в prefix: визуальные параметры в конструкторе можно быстро подбирать прямо на экране, не вводя каждое новое значение вручную.
Что изменилось
Один компонент поддерживает простые поля и сложные составные сценарии ввода.
Показать макеты в Figma
Создал хлебные крошки
Проблема
В продукте появились сценарии с глубокой иерархией, но единого паттерна навигации между уровнями не было. Пользователю было сложно понять, где он находится, и быстро вернуться к родительскому разделу.
Решение
Я описал использование компонента для структур от трёх уровней, состояние текущего уровня и сворачивание части пути в троеточие. Если крошки не помещаются, они сокращаются, а не переносятся на вторую строку.
Что изменилось
Навигация одинаково работает на полноразмерных страницах и в drawer.
Показать макеты в Figma
Создал уведомления
Проблема
Обратная связь после действий была непоследовательной: разные сценарии по-разному сообщали об успехе, предупреждениях и ошибках, а несколько сообщений могли одновременно перегружать интерфейс.
Решение
Я проработал Success, Warning и Error, структуру заголовка, описания и ссылок, появление и закрытие уведомлений. Несколько сообщений объединяются в стек, чтобы не перекрывать интерфейс.
Что изменилось
Результат действия заметен, а несколько уведомлений остаются управляемыми.
Показать макеты в Figma
Создал компонент загрузки файлов
Проблема
В продукте не было единого компонента загрузки файлов, который покрывал бы весь сценарий: выбор и drag-and-drop, прогресс, ограничения, ошибки и отмену. В разных местах эти состояния приходилось решать отдельно.
Решение
Компонент поддерживает кнопку и drag-and-drop. Я проработал Hover и Dragover, ограничения формата и размера, сетевые и системные ошибки, процесс загрузки, отмену, а также варианты файла с превью и без него.
Что изменилось
Одна модель поведения подходит для разных типов файлов и заранее объясняет пользователю ограничения.
Показать макеты в Figma
Создал компонент «Изображение»
Проблема
Не было единого способа отображать изображения и показывать, что картинка отсутствует или повреждена.
Решение
Я создал компонент с тремя состояниями: Empty, Empty with text и Damaged. Для пустого состояния предусмотрел два варианта – только с иконкой или с дополнительным пояснением. Для повреждённого изображения сделал отдельную иконку и текстовое сообщение.
Что изменилось
По состоянию компонента сразу видно, изображение отсутствует или повреждено.
Показать макеты в Figma
Обновил color picker
Проблема
Старый color picker визуально устарел и содержал лишние элементы, которые усложняли выбор цвета.
Решение
Я добавил скругления, обновил маркер выбранного цвета, увеличил рабочие области и ячейки недавних цветов. Убрал отдельные поля RGB, а прозрачный цвет закрепил первым среди недавно использованных.
Что изменилось
Контрол стал компактнее, понятнее и соответствует новому визуальному языку Mindbox.
Показать макеты в Figma
Результаты подробнее
Что изменилось для продукта
У команды появились общие компоненты и правила, на которые можно опираться при редизайне. Новые экраны можно собирать последовательно, не принимая заново одни и те же решения.
