☰
Case Study: Экосистема Яндекс

Как мы навели порядок в 12 000+ компонентах

Детальный разбор того, как Яндекс перестроил свою дизайн-систему с помощью ФлоуФордж, устранив дублирование кода и синхронизировав работу 45 дизайн-команд.

Дашборд аналитики компонентов Яндекса в ФлоуФордж
01. Проблема

Хаос в компонентах

«У нас было 14 разных кнопок, и ни одна не валидна по WCAG»

До внедрения ФлоуФордж экосистема Яндекса страдала от «башни из башен». Каждая продуктовая команда (Маркет, Такси, Музыка) поддерживала свой изолированный репозиторий UI-китов. Это приводило к тому, что глобальный ребрендинг требовал 3 месяцев ручной правки CSS в каждом проекте.

Отсутствие единого источника истины (Single Source of Truth) привело к тому, что 30% UI-компонентов на сайтах Яндекса были устаревшими и дублировали функционал других элементов.

Диагностика системы

Дубликатов кода 84%
Время на рутину ~120 ч/мес
Багов верстки ~15%
02. Решение

Внедрение ФлоуФордж

Мы не просто перенесли код. Мы выстроили архитектуру, где дизайн-токены — это «живые» переменные, управляемые единым ядром.

🧬

Централизация токенов

Вместо разрозненных SCSS-переменных мы создали единый JSON-хранилище цветов и шрифтов. Изменение одного токена в ФлоуФордж мгновенно обновляло стили в 45+ репозиториях.

🔄

Git-синхронизация

Настроили CI/CD пайплайн: при апруве изменений в дизайн-системе ФлоуФордж автоматически создает Pull Request в репозитории Yandex Core UI с новыми версиями компонентов.

🛡️

Валидация доступности

Встроили автоматические проверки контрастности и ARIA-меток. Теперь разработчики не могут запушить код, если кнопка не соответствует стандартам WCAG 2.1.

03. Процесс

Этапы внедрения

Процесс занял 4 месяца. Мы использовали стратегию «Strangler Fig» — постепенно замещали старые компоненты новыми, генерируемыми ФлоуФордж, пока вся экосистема не стала единой.

  • 1
    Аудит (Недели 1-4) Сканирование 12 000 компонентов и выявление дубликатов.
  • 2
    Настройка ядра (Недели 5-8) Миграция токенов в ФлоуФордж и настройка билдеров.
  • 3
    Миграция (Недели 9-16) Постепенный переезд продуктов Такси, Маркет и Драйв.
PROCESS

Визуализация миграции

04. Результаты

Цифры говорят сами за себя

Показатели эффективности через 6 месяцев после полного перехода.

-40% Времени на UI
0 Дубликатов
12x Скорость релиза
100% A11y Score
05. Отзыв клиента

«Мы наконец-то начали делать продукт, а не править верстку»

«ФлоуФордж дал нам возможность масштабироваться без линейного роста команды дизайнеров. Раньше мы тратили недели на согласование цветов, теперь это происходит за секунды автоматически.»

АК
Алексей Кравцов Product Owner, Yandex Core UI
Повторить успех

Свяжитесь с отделом Enterprise продаж