Время на чтение: 2 мин. 50 сек.

  • Флида
  • B2C
  • Web & Mobile

Дизайн система Flida Soft 2

Роль — архитектор дизайн системы | UI/UX-дизайнер

📌 Разработал и внедрил дизайн систему Flida Soft 2 с AI-автоматизацией верстки, сократив Time-to-Market с месяцев до пары недель и почистив систему с 500+ до 100 компонентов.

Проблемы и предпосылки

Масштабируема дизайн-система для продуктов Флида с AI-версткой

Из-за отсутствия единых стандартов и разрозненности компонентов команда теряла консистентность интерфейсов. Макеты требовали ручной доработки и не были готовы к автоматизированной AI верстке, что замедляло производство и поставку фич в продакшен.

Ключевые проблемы:

  • Долгая разработка: масштабирование дизайна замедляло релизы;
  • Несовместимость с AI: макеты не имели точной структуры, из-за чего AI-агенты не могли корректно распознать интерфейс и сгенерировать код;
  • Рассинхрон дизайна и кода: отсутствие единой документации приводило к блокерам при передаче макетов в разработку.

Задачи

Разработать и внедрить дизайн-систему Flida Soft 2, чтобы:

  1. Увеличить скорость разработки и сборки новых экранов;
  2. Подготовить UI-кит к автоматизированной верстке с помощью AI-агентов;
  3. Обеспечить консистентность интерфейсов.

Решения

Токены и скеффолды — построил систему токенов и каркасных макетов, полностью повторяющих структуру верстки на фронтенде. Это позволило AI-агентам считывать макеты и генерировать чистый код.

Токены и каркасы дизайн-системы, экран 1
Токены и каркасы дизайн-системы, экран 2

Атомарный UI-кит — разработал масштабируемую библиотеку компонентов, обеспечив гибкость настройки и единообразие стилей.

Атомарный UI-кит Flida Soft 2

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

Гибкие темы Flida Soft 2, экран 1
Гибкие темы Flida Soft 2, экран 2
Светлая тема на мобильном экране
Вариант акцентной темы на мобильном экране
Тёмная тема на мобильном экране

Полная адаптивность — настроил правила layout для всех компонентов. Интерфейс подстраивается под любую ширину экрана и тип девайса.

Адаптивные варианты компонентов Flida Soft 2

📊 Результат

  • Сокращено количество компонентов с 500+ до 100;
  • Внедрена полная автоматизация вёрстки через AI-агента;
  • Time-To-Market снижен с месяцев до пары недель.