Если ваш продукт живёт только на вебе - повезло, дизайн-система там - решённая задача. Когда добавляются iOS, Android, иногда Vision и watchOS - старые подходы ломаются. Расскажу, как мы это собираем сейчас.
Главный принцип: токены - общие, компоненты - нет
Раньше команды пытались сделать «один компонент-кит на все платформы» - например, через React Native или Flutter. Это работает для продуктов с очень нейтральным UX. Для брендовых и нативных продуктов - нет, эффект «не своё везде».
Сейчас мы делаем так: общие - только дизайн-токены (цвета, типографика, отступы, радиусы, motion). Компоненты - нативные на каждой платформе, но соблюдают одинаковые токены. Это даёт визуальную узнаваемость без разрушения нативной идиоматики.
Как устроены токены
- Базовая палитра (60-100 цветовых токенов) - общая.
- Семантические алиасы (text/primary, surface/raised, border/subtle) - общие.
- Платформенные оверрайды - отдельный слой: Liquid Glass на iOS меняет surface-токены, Material You - другие.
- Motion-токены (длительности, easing) - общие, но реализация на каждой платформе своя.
- Иконки - общий набор SVG, на платформах конвертируются в нативные форматы.
Инструменты и pipeline
Источник правды - Figma Variables. Из неё через token-pipeline собираются: CSS-переменные для веба, Swift-расширения для iOS, Compose Theme для Android, ресурсы для Vision и watchOS. Любое изменение токена - один PR, который автоматически попадает во все платформы.
Что мы не пытаемся унифицировать
- Системные паттерны (sheet vs dialog, navigation, keyboard handling) - оставляем платформенными.
- Анимации, специфичные для UI-языка (spring physics на iOS vs material motion).
- Вкус взаимодействия с тачем (rubber band scroll, overscroll glow).
- Системные кнопки и контролы - не пытаемся «брендировать» там, где система знает лучше.
Документация
Документацию ведём в одном месте, но с разделами по платформам. Каждый компонент имеет описание поведения, токены, примеры использования и code snippet под каждую платформу. Storybook для веба, Xcode previews для iOS, Android Studio previews для Android - связаны через единый таксономический ID компонента.