Дизайн-система “Нептун”: единый стандарт интерфейсов во всей экосистем

Создать единую дизайн-систему для приложений и веб-версий БКС, обеспечивающую визуальную консистентность, ускоренную разработку и снижение стоимости поддержки.

Цель — унифицировать интерфейсы, стандартизировать UX-паттерны и ускорить внедрение новых функций за счёт переиспользуемых компонентов и общей визуальной 

В результате проекта была создана дизайн-система «Нептун», ставшая технологическим и визуальным ядром для мобильных и веб-продуктов БКС. Она объединила команды 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

• Дизайн: дизайнерская программа с автоматическим экспортом токенов и иконок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Digital продукты БКС, которые живут на единой Дизайн-системе. География работы компании БКС – Российская федерация (клиентская база, которая состоит из людей проживающие во всех регионах)