Я разработал дизайн-систему для мобильных приложений и веб-сайтов. Эта система в первую очередь предназначена для финансовых продуктов благодаря специальным компонентам вроде карточек продуктов, графиков и таблиц. Дизайн-система состоит из компонентов в Figma, документации, веб-реализации на React и мобильной реализации на React Native.
Масштабируемая дизайн-система для fintech-продуктов на мобильных и веб-интерфейсах. Я спроектировал и собрал дизайн-систему для финансовых продуктов, включающую компоненты Figma, документацию, реализацию на React и React Native.
Fintech-продукты часто должны отображать разные типы данных, графики, сложные таблицы, несколько платформ, жёсткую консистентность и быструю итерацию. Цель заключалась в том, чтобы создать гибкую систему, которая работает на web, iOS и Android и при этом легко настраивается под разные продуктовые команды и бренд-направления.
Я работал над системой end to end: структура, архитектура компонентов, Figma Variables, документация, дизайн-гайды и логика реализации для web и mobile.
Система построена на atomic design и design tokens. Цвета, типографика, отступы, радиусы и платформенные значения управляются через Figma Variables, поэтому систему легко адаптировать без ручной пересборки компонентов.
Такой подход позволяет командам переключаться между светлой и тёмной темами, менять визуальный стиль и адаптировать Android-экраны под паттерны iOS с минимальными усилиями.
Типографика токенизирована для всех платформ. Система использует нативные системные шрифты для iOS, Android и web, помогая интерфейсам ощущаться привычно на каждой платформе и при этом сохранять единство дизайн-языка.
Текстовые стили структурированы так, чтобы команды могли быстро переключаться между платформенными пресетами и сохранять предсказуемую иерархию на продуктовых экранах.
Библиотека включает более 40 базовых компонентов с описанными состояниями, вариантами и паттернами взаимодействия.
Также в неё входит более 20 fintech-специфичных компонентов для финансовых продуктов: карточки продуктов, графики, таблицы, отображение данных и другие интерфейсные паттерны, которые обычно используются в банковских, трейдинговых и инвестиционных продуктах.
Каждый компонент содержит рекомендации и правила использования, состояния, примеры и примечания по реализации. Документация разделена на два потока:
Документация для дизайнера: поведение компонента, варианты, состояния, правила компоновки и примеры использования
Документация для разработчика: рекомендации по реализации, props, состояния и переиспользуемые паттерны
Система также описывает типовые продуктовые сценарии: состояния ошибок, загрузки, пустые состояния, шаблоны, переходы и поведение анимаций.
Более 40 компонентов со всеми состояниями, документацией и анимациями
Более 20 компонентов со всеми состояниями, документацией и анимацией
Компоненты легко настраиваются: несколькими кликами и небольшими правками кода можно изменить палитру, отступы, радиус скругления и многое другое.
Сократилось время на воссоздание типовых fintech UI-паттернов
Повысилась консистентность между web, iOS и Android
Появился общий язык между дизайном и разработкой
Адаптация под темы и платформы стала быстрее благодаря токенам и переменным
