ReBank
Дизайн-система на токенах: от Figma до production-кода
ReBank DS — токен-ориентированная дизайн-система для мобильного банкинг-продукта. От сырых значений цвета в JSON до задокументированных React-компонентов в Storybook. Каждое визуальное решение в продуктовом UI восходит к токену. Каждый токен компилируется в CSS-переменную, которая живёт в коде.
Трёхуровневая модель
Токены структурированы в три слоя, тем самым если меняется цвет бренда — обновляется один примитив. Все семантические токены, которые на него ссылаются, обновляются автоматически по всему продукту.
Button Component
Все состояния в одном месте — default, hover, disabled, filled и ghost. Размеры и цвета управляются токенами.
Card Component
Банковская карта как компонент: баланс, платёжная система, градиент из семантических токенов.
Token Pipeline
Токены живут в JSON и компилируются через Style Dictionary в CSS и JS — без ручного переноса значений.
Storybook Docs
Каждый компонент задокументирован в MDX: пропсы, состояния и edge-cases прямо в браузере.
Comment Component
Контекстные уведомления с динамическим контентом — от кэшбека до предупреждений о тратах.
Токены не статичны — они компилируются. Style Dictionary читает JSON из Primitives/, Semantic/ и Typography/, и собирает CSS-переменные и JS-объект в папку build/. Watch-скрипт пересобирает при каждом изменении файла.
$themes.json определяет Light и Dark как отдельные конфигурации, обе ссылаются на один и тот же семантический слой. Смена темы не требует изменений в коде компонентов — меняется только активная тема.
Компоненты задокументированы в Storybook с использованием MDX-stories. Конфигурация включает @storybook/react-vite и @storybook/addon-docs — не просто песочница, а живая спецификация. Каждая story импортирует CSS-переменные из build/variables.css — в Storybook рендерятся те же значения токенов, что и в продукте.
Таким образом получилось выстроить полноценный пайплайн от дизайн-токенов до продуктового UI: токены структурированы в три слоя, компилируются через Style Dictionary в CSS-переменные и подключены в Storybook. На основе системы собрано пять экранных флоу с поддержкой Light и Dark тем — Auth, Onboarding, KYC с верификацией документа и скана лица, настройка аккаунта и главный экран банкинга. Все состояния компонентов покрыты, хендофф между дизайном и кодом автоматизирован.
Смотрите также
