Mobile App Design System
Design system is not UI kit with documentation. It's infrastructure: set of conventions, tools and processes that ensure product consistency with multiple teams working simultaneously. Company with one app and two designers can get by with good UI kit. Company with three products, six designers and fifteen developers — can't.
Design system's main task — remove design decisions from "each time from scratch" category and move them to "already solved, take ready one". How many button variants should exist? What's spacing between sections? How does empty state look? System answers these questions once.
Design system architecture for mobile
Level 1: Design tokens
Tokens — foundation. Not just named colors, but semantically related system:
Primitive tokens:
color-blue-500 = #2563EB
color-blue-600 = #1D4ED8
Semantic tokens:
color-action-primary = {color-blue-500}
color-action-primary-hover = {color-blue-600}
Component tokens:
button-primary-background = {color-action-primary}
button-primary-background-pressed = {color-action-primary-hover}
Three-level system allows rebranding (change primitive) without fixing components. Tokens live in JSON, sync between Figma (via Tokens Studio) and code (via Style Dictionary). Output — platform-specific files: Colors.swift for iOS, colors.xml + MaterialTheme for Android, theme.ts for React Native.
For dark theme and customization — Mode-based tokens. In Figma Variables: "Light" and "Dark" Mode for each semantic token. Theme switching changes entire UI via one variable.
Level 2: Foundations
Typography with full spec: typeface, weight, size, line-height, letter-spacing, usage — for each style (Display, Headline, Title, Body, Label, Caption). iOS-specific: Dynamic Type support — each style bound to UIFont.TextStyle or scaled relative to it. Android: Material Type Scale compliance.
Spacing system: 4pt/8pt grid with named steps (xs=4, sm=8, md=16, lg=24, xl=32, 2xl=48). All padding in components and layouts — multiple of base step.
Iconography: unified icon set (Phosphor, Lucide, Material Symbols or custom). All icons — one style, one grid (24×24 or 20×20), usage rules filled vs. outlined.
Level 3: Components
Components in design system stricter than in regular UI kit:
- Each component — documented: purpose, anatomy, variants, states, when to use, when not
- Component API in Figma (via Component Properties) matches code component props
- Component changes — via changelog, not silent update
For mobile apps — full set: navigation (Tab Bar, Navigation Bar, Bottom Sheet), forms (Input, Select, Checkbox, Radio, Toggle, Slider, Date Picker), data display (Card, List, Table, Badge), feedback (Toast, Dialog, Progress, Skeleton), marketing (Banner, Callout, Illustration placeholders).
All components — with Auto Layout, supporting at least two color schemes (light/dark).
Level 4: Patterns
Patterns — not components but repeating UX solutions: how auth screen builds, how onboarding works, how empty state formats. Documented as best practices with examples, not as rigid templates.
Governance: who and how updates system
Without process design system becomes outdated library nobody uses. Need:
Contribution process — how teams propose new components. Request → design → review → approve → publish. Not everyone decides alone.
Versioning — semantic versioning (major.minor.patch). Breaking changes — major version, new components — minor, fixes — patch. Sync in Figma (via Library updates) and npm package/Swift Package.
Deprecation policy — components not deleted silently. Deprecated → migration guide → deletion through two-three minor versions.
Connection with codebase
Design system without code implementation — pretty Figma file, nothing more. Implementation depends on stack:
React Native — component library in separate package (monorepo, Nx or Turborepo). Storybook for React Native for docs and visual regression testing via Chromatic or similar.
Flutter — package with custom ThemeData extension + widget library. Widgetbook for component documentation.
Native iOS — Swift Package with UIKit/SwiftUI components, color extensions (UIColor.primary, Color.primary), custom UIFont helpers for Dynamic Type.
Native Android — Maven artifact with Material Components extensions, custom theme via Theme.AppCompat inheritance, Compose components in separate module.
Token sync via CI: on JSON token file change — automatic platform-specific file regen and PR to repo.
What actually takes time
Not the components themselves. Components — 30–40% of work. Rest — tokens (especially dark mode), documentation, governance process, developer API alignment, migration of existing screens to system.
So honest design system timeline from scratch — 1–2 weeks for design-only (without code). With code — month and more, depends on platform coverage.
Typical launch mistakes
Doing everything at once. First design system version should cover 20% of components used in 80% of screens. Rest — next iterations. System built for three months before first use doesn't survive to second version.
Cost calculated individually after auditing products using system and team count.