Питання звучить щоразу, як тільки стартап виходить на мобайл: "А можна зробити одну систему і для iOS, і для Android?" Теоретично — так. Практично — це залежить від того, що ви вкладаєте в слово "одна".

Одна — якщо говорити про токени, дизайн-принципи, кольори, типографіку, spacing. Різна — якщо говорити про платформні патерни взаємодії.

Що спільне для обох платформ

Ядро дизайн-системи — токени — може і має бути єдиним. Кольори, типографічна шкала, відступи, border-radius, тіні — це не платформна специфіка, це бренд. Один JSON-файл з токенами, Style Dictionary конвертує у CSS vars, Swift vars і Compose-токени автоматично.

Спільне:

  • Кольорова палітра і семантичні кольори
  • Типографічна шкала (але не системний шрифт)
  • Spacing система (4pt grid)
  • Компоненти без сильної платформної семантики: Card, Badge, Avatar, Tag
  • Іконки

Де платформи розходяться

iOS і Android мають власні Human Interface Guidelines та Material Design — і деякі патерни там різні не тому що хтось помилився, а тому що користувачі звикли до них саме так.

  • Navigation: iOS — tab bar знизу + push navigation. Android — nav drawer або bottom nav + back gesture. Однакові — але різний вигляд і поведінка
  • Кнопки: iOS Button має різні visual defaults. Android — Material You кнопки з elevation.
  • Typography: iOS SF Pro, Android Roboto/Google Sans. Fontsize scale може бути спільним, але шрифт — ні.
  • Alerts і dialogs: iOS Alert — по центру з вертикальними кнопками. Android — по центру з горизонтальними.

Робоче правило: shared design language + platform-specific patterns. Токени і принципи — єдині. Компоненти з сильною платформною семантикою — окремі варіанти в Figma і окремі реалізації в коді.

Як організувати Figma-файл

Одна з успішних структур:

  • 🎨 Foundations — токени, палітра, типографіка (спільні)
  • 📦 Components / Shared — компоненти без платформної специфіки
  • 🍎 Components / iOS — платформні компоненти iOS
  • 🤖 Components / Android — платформні компоненти Android
  • 📱 Screens / iOS і Screens / Android

React Native як міст

Якщо продукт на React Native — єдина кодова система більш реальна: один набір компонентів з Platform.OS перемикачем для специфічних стилів. Але навіть тоді Figma-файл варто структурувати як описано вище — бо дизайнер думає платформами, навіть якщо розробник пише один код.

Будуємо мобайл-friendly дизайн-системи — від токенів до платформних компонентів і Storybook React Native.