🎯 Контекст
Разработка дизайн-системы для MES-платформы КАДП. Необходимость стандартизации интерфейсов и ускорения разработки новых функций при сохранении единого визуального языка. Система создавалась командой из 8 дизайнеров.
Цель: устранить хаос в интерфейсах, ускорить проектирование экранов дизайнерами, облегчить передачу в разработку и обеспечить единый пользовательский опыт на всех экранах MES-системы.
Обзор дизайн-системы в Figma
🎯 Задача
Создать масштабируемую дизайн-систему для MES-платформы, включающую библиотеку компонентов, токены (цвета, типографика, отступы), гайдлайны и документацию. Обеспечить возможность быстрой сборки новых экранов без потери качества.
🔍 Анализ
- Аудит текущих интерфейсов: собрал и проанализировал разные типы существующих экранов, собрал каталог существующих компонентов и паттернов, выявил несоответствия и дублирования.
- Исследование потребностей: провел встречи с разработчиками и системными аналитиками, чтобы выяснить с чего начать, как и в каком виде предоставить компоненты разработчикам для переноса в Storybook.
- Бенчмаркинг: изучил лучшие практики дизайн-систем в индустрии (Material Design, IBM Carbon, Atlassian). Адаптировал их под инженерную специфику MES.
- Выявление приоритетов: определил ключевые компоненты, которые используются на 80% экранов (таблицы, формы, фильтры, чарты). Таблица создана как отдельный сложный компонент.
⚡ Процесс
- Структура и архитектура: выстроил иерархию компонентов и токенов, задал систему наименований.
- Разработка компонентов: спроектировал базовые UI-компоненты (кнопки, инпуты, таблицы, модальные окна). Собрал их в единую библиотеку с использованием Variants и Auto Layout.
- Токены: систематизировал цвета, типографику, отступы и тени. Настроил переменные для светлой и тёмной тем.
- Шаблоны страниц: создал шаблоны страниц для разных типов экранов и модальных окон. Обучил системных аналитиков как использовать шаблоны при конфигурировании экранов на low-code платформе без участия дизайнеров.
- Документация: описал правила использования компонентов, создал гайдлайны для разработчиков и дизайнеров. Внедрил структуру экранов и модальных окон.
- Коммуникация и внедрение: провожу обучающие встречи с новыми дизайнерами, обучаю использованию дизайн-системы смежные команды и новых коллег, регулярно собираю обратную связь и вношу корректировки.
Токены и переменные
🏆 Результат
- Создана масштабируемая дизайн-система с 35+ компонентами и токенами.
- Зафиксированы UX паттерны для проекта MES.
- Внедрена в работу системных аналитиков при сборке экранов на Low-code платформе.
- Сократил время разработки новых экранов.
- Обеспечил единообразие интерфейсов на всех экранах MES-системы.
- Создал документацию и гайдлайны для дальнейшего развития системы.
Компонент Button
Компонент Dropdown
Темная тема
🔍 Что можно улучшить (ретроспектива)
- Автоматизация: внедрить автоматическую перегонку компонентов из Figma в Storybook (частично сделано), а также автоматическую генерацию документации из Figma (AI, плагины или API).
- Тестирование компонентов: добавить и по возможности максимально автоматизировать (AI) этап тестирования компонентов.
- Интеграция с разработкой: настроить передачу токенов в код (Design Tokens → CSS-переменные).
- Адаптация под мобильные сценарии: расширить дизайн-систему для мобильных устройств (планшеты, КПК).
- Вовлечение команды: на ранних этапах активнее вовлекать разработчиков в процесс проектирования и согласования архитектуры.