Multi-Platform Design Tokens — Web, iOS, and Android Token Sharing

Cross-Platform Design Token Strategy

Design tokens become most powerful when they bridge the gap between platforms. A single source of truth feeds into CSS custom properties, Swift constants, Kotlin objects, and more.

Token Source Format

Store tokens in a platform-agnostic format (JSON or YAML):

{
  "colors": {
    "primary": {
      "value": "#2563eb",
      "type": "color"
    },
    "error": {
      "value": "#dc2626",
      "type": "color"
    }
  },
  "spacing": {
    "md": {
      "value": "16",
      "type": "dimension",
      "unit": "px"
    }
  }
}

CSS Output

:root {
  --colors-primary: #2563eb;
  --colors-error: #dc2626;
  --spacing-md: 16px;
}

iOS Swift Output

enum Colors {
  static let primary = UIColor(hex: "#2563eb")
  static let error = UIColor(hex: "#dc2626")
}

enum Spacing {
  static let md: CGFloat = 16
}

Android Kotlin Output

object Colors {
  val primary = Color(0xFF2563EB)
  val error = Color(0xFFDC2626)
}

object Spacing {
  val md = 16.dp
}

Transformation Pipeline

Tools like Style Dictionary handle the transformation:

1. Read JSON token source
2. Apply platform-specific transforms (px to dp, hex to UIColor)
3. Output formatted files for each platform

Keeping Platforms in Sync

• Store tokens in a shared repository
• Run token builds in CI/CD
• Publish platform-specific packages (npm, CocoaPods, Maven)
• Version tokens semantically (breaking changes when removing tokens)

Figma Integration

Export Figma styles as tokens using plugins like Tokens Studio, then feed them into the same transformation pipeline.