Единая дизайн-система и архитектура в БКС

Главное о кейсе

“Нептун” — это централизованная дизайн-система, обеспечивающая единый визуальный язык и унификацию интерфейсов во всей экосистеме БКС — Web, Android и iOS.

Дизайн-система спроектирована так, чтобы органично интегрироваться в архитектуру приложений, основанную на UDF (Unidirectional Data Flow) — едином для всех платформ подходе к управлению состоянием.

Компоненты “Нептуна” реализованы как независимые и самодостаточные модули, не привязанные к бизнес-логике. Это позволяет любому разработчику быстро создавать и развивать интерфейсы без необходимости глубокого погружения в доменную область, что значительно повышает скорость разработки.

Ключевая особенность “Нептуна” — модульно-композиционный подход. Из простых базовых блоков конструируются сложные комбинированные компоненты, не увеличивая общей сложности системы. Каждый элемент имеет предсказуемое поведение “по умолчанию” и может гибко настраиваться под конкретный сценарий использования.

Такой архитектурный фундамент обеспечивает детерминированную работу компонентов: каждый UI-элемент чётко реагирует на изменения состояния, что делает интерфейсы надёжными, тестируемыми и устойчивыми к ошибкам.

Благодаря этому “Нептун” стал настоящим “конструктором экранов”, позволяющим командам собирать новые фичи из готовых компонентов, снижая затраты на разработку и повышая консистентность интерфейсов.

В рамках проекта разработаны базовые и сложные компоненты, внедрена структура дизайн-токенов для темизации и реализованы процессы CI/CD для сборки и публикации.

Сегодня “Нептун” — это ядро визуальной платформы БКС, применяемое в продуктах “Мир Инвестиций”, “БКС Банк” и “UCF”.

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

Как проект изменил жизнь пользователей

Проект уникален тем, что объединяет Android, iOS и Web-команды на единой платформе визуальных компонентов, построенной на Jetpack Compose и SwiftUI и React. “Нептун” обеспечивает единые принципы дизайна и реализации UI во всех продуктах, создавая общий язык взаимодействия между дизайнерами и разработчиками.

Реализованы автоматический импорт иконок из Figma, централизованная публикация компонентов в корпоративный Artifactory и генерация версий дизайн-системы для регресc-тестирования с добавлением семантических данных и тест-тегов.

Реализована автоматическая кодогенерация токенов и ресурсов из Figma — после обновлений дизайна система сама формирует и публикует актуальные стили и иконки для Android, iOS и Web, обеспечивая полное визуальное соответствие между платформами.

Благодаря “Нептуну” достигнуто единообразие интерфейсов и ускорен процесс проектирования — time-to-market вырос при сохранении стабильного двухнедельного цикла релизов.

Бизнес-задача и ее решение

В результате проекта была создана дизайн-система «Нептун», ставшая технологическим и визуальным ядром для мобильных и веб-продуктов БКС. Она объединила команды Android, iOS и Web, стандартизировала процессы разработки и ускорила вывод новых функций.

Ключевые результаты:

Повышена скорость разработки экранов и фич.

Обеспечено единообразие UI-компонентов во всех продуктах («Мир Инвестиций», «БКС Банк», «UCF»).

Внедрена полная автоматизация CI/CD: сборка, тестирование и публикация компонентов.

Снижено количество UI-дефектов и визуальных расхождений.

Интеграция с архитектурой UDF обеспечила стабильность и предсказуемость интерфейсов.

«Нептун» стал не просто библиотекой, а комплексным решением, обеспечивающим согласованность, скорость и качество развития продуктовой экосистемы.

Крафт (мастерство), реализация, технические детали

Для создания дизайн-системы «Нептун» использовались ключевые технологии и инструменты:

Web: React, TypeScript

Android: Jetpack Compose, Kotlin

iOS: SwiftUI, Swift

Сборка: Lerna, Gradle, Swift Package Manager

CI/CD: GitLab CI/CD для автоматизации сборки, тестирования и публикации через Artifactory

Дизайн: Figma с автоматическим экспортом токенов и иконок

Архитектура: модульная с семантическим версионированием (SemVer)

Документация: интерактивные каталоги компонентов (Compose Catalog) и база знаний в Confluence

Тестирование: Unit-тесты, UI-автотесты, анализ кода (Detekt)

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Основная сложность заключалась в создании единой дизайн-системы для трёх различных платформ (Android, iOS, Web) с полным визуальным и функциональным соответствием. Необходимо было обеспечить бесшовную интеграцию в существующую архитектуру на основе UDF (Unidirectional Data Flow), не нарушая её принципов.

Ключевые вызовы:

Разработка кроссплатформенных компонентов, сохраняющих идентичное поведение и внешний вид на разных технологических стеках (Jetpack Compose, SwiftUI, React).

Построение автоматизированных процессов CI/CD для синхронной публикации и версионирования компонентов во всех экосистемах.

Организация эффективного взаимодействия между командами дизайнеров (Figma) и разработчиков через автоматический экспорт токенов, иконок и ресурсов.

Обеспечение обратной совместимости и плавного перехода продуктов на новую дизайн-систему без остановки разработки.

Скриншоты