Как мы построили дизайн-систему для Sonarex за 6 недель

Когда команда Sonarex обратилась к нам, их продукт уже работал на трёх платформах — веб, iOS и Android. Но визуальная консистентность между ними стремилась к нулю. Каждая команда разработчиков использовала собственные компоненты, и даже кнопки выглядели по-разному.

Мы начали с аудита существующего интерфейса. За первую неделю команда проанализировала 340 экранов и выявила 87 уникальных вариаций компонентов, которые можно было свести к 47 стандартизированным. Это стало отправной точкой.

Атомарный подход

Мы выбрали методологию Atomic Design Брэда Фроста, адаптировав её под специфику Sonarex. Атомы — цвета, типографика, иконки, тени. Молекулы — инпуты, кнопки, бейджи. Организмы — карточки, модальные окна, навигация. Шаблоны — страницы с реальными данными.

Ключевое решение: мы строили систему параллельно в Figma и коде. Каждый компонент проходил через пайплайн: дизайн → ревью → верстка → тестирование → документация. Никаких «сначала нарисуем всё, потом отдадим разработчикам».

Токены дизайна

Основой стали дизайн-токены — единый JSON-файл, который генерировал переменные для CSS, Swift и Kotlin. Изменение одного значения в Figma автоматически обновляло все три платформы через CI/CD пайплайн.

Мы настроили 186 токенов: 24 цвета с поддержкой тёмной темы, 8 ступеней типографической шкалы, 6 уровней теней, 4 радиуса скругления и систему отступов, основанную на базовом модуле 4px.

Результаты

Через 6 недель дизайн-система была готова к продакшну. Время создания нового экрана сократилось с 3 дней до 4 часов. Количество визуальных багов снизилось на 73%. А главное — три команды разработки наконец заговорили на одном языке.

Мы продолжаем поддерживать систему и уже планируем второй релиз с компонентами для дата-визуализации и AI-интерфейсов.