---
id: wiki-2026-0508-크로스-플랫폼-디자인-시스템-연동
title: 크로스 플랫폼 디자인 시스템 연동
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Cross-Platform Design System, Multi-Platform Tokens]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [design-system, frontend, mobile, tokens, theming]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: style-dictionary/tokens-studio/tamagui
---

# 크로스 플랫폼 디자인 시스템 연동

## 매 한 줄
> **"매 single source of truth (tokens) → multi-platform output"**. 매 Figma 의 design tokens 을 source of truth 로, Style Dictionary / Tokens Studio / Specify 를 통해 web (CSS/JS), iOS (Swift), Android (XML), React Native (JS) 로 transform. 매 2026 W3C Design Tokens Community Group spec 이 stable 화되며 ecosystem convergence 진행.

## 매 핵심

### 매 layered token model
1. **Primitive tokens**: `color.blue.500`, `space.4` — raw values.
2. **Semantic tokens**: `color.surface.primary`, `space.button.padding` — intent.
3. **Component tokens**: `button.bg.hover`, `card.shadow` — component-specific.

### 매 transformation pipeline
- Figma Variables → JSON (W3C DTCG format) → Style Dictionary → platform outputs.
- Outputs: CSS custom props, JS const, iOS UIColor, Android colors.xml, RN StyleSheet.

### 매 응용
1. 매 multi-product 회사 — web app + mobile + email + marketing site 의 일관성.
2. 매 white-label / theming — runtime token swap.
3. 매 dark mode + density + brand variant 의 multiplicative theming.

## 💻 패턴

### 1. W3C DTCG token JSON
```json
{
  "color": {
    "blue": { "500": { "$value": "#3b82f6", "$type": "color" } },
    "surface": {
      "primary": { "$value": "{color.blue.500}", "$type": "color" }
    }
  }
}
```

### 2. Style Dictionary config
```javascript
// sd.config.js
export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: { transformGroup: 'css', files: [{ destination: 'tokens.css', format: 'css/variables' }] },
    js: { transformGroup: 'js', files: [{ destination: 'tokens.js', format: 'javascript/es6' }] },
    ios: { transformGroup: 'ios-swift', files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }] },
    android: { transformGroup: 'android', files: [{ destination: 'colors.xml', format: 'android/colors' }] },
  },
};
```

### 3. CSS output
```css
:root {
  --color-blue-500: #3b82f6;
  --color-surface-primary: var(--color-blue-500);
}
[data-theme="dark"] { --color-surface-primary: #60a5fa; }
```

### 4. React Native (Tamagui) usage
```tsx
import { tokens } from './tokens';
const config = createTamagui({ tokens, themes: { light, dark } });
<View backgroundColor="$surfacePrimary" padding="$4" />
```

### 5. Swift output
```swift
public class Tokens {
  public static let colorSurfacePrimary = UIColor(red: 0.23, green: 0.51, blue: 0.96, alpha: 1.0)
  public static let spaceButtonPadding: CGFloat = 12.0
}
```

### 6. Runtime theme swap (web)
```typescript
function setTheme(theme: 'light' | 'dark' | 'high-contrast') {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}
```

### 7. Figma → tokens sync (Tokens Studio plugin)
```yaml
# .github/workflows/tokens-sync.yml
on:
  push:
    paths: ['tokens/**']
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx style-dictionary build
      - uses: peter-evans/create-pull-request@v6
```

## 매 결정 기준
| 상황 | Tool |
|---|---|
| OSS / DIY pipeline | Style Dictionary |
| Figma-tight workflow | Tokens Studio + Style Dictionary |
| RN-first | Tamagui (built-in token system) |
| Enterprise / governance | Specify, Supernova |
| Single platform only | Skip — use Tailwind theme / CSS vars directly |

**기본값**: 매 W3C DTCG JSON + Style Dictionary + Tokens Studio Figma plugin.

## 🔗 Graph
- 부모: [[Design System]] · [[Design Tokens]]
- 변형: [[Style Dictionary Pipelines|Style Dictionary]]
- Adjacent: [[Figma Variables]] · [[React Native]]

## 🤖 LLM 활용
**언제**: 매 design system 의 multi-platform expansion 시. 매 Figma → code pipeline 설계 시.
**언제 X**: 매 single web app — 매 CSS vars + Tailwind theme 으로 충분.

## ❌ 안티패턴
- **Hard-coded values 병행**: 매 token 정의했으나 component 에서 hex 직접 사용 — 매 governance 실패.
- **Semantic layer 생략**: 매 primitive token 만 노출 — 매 dark mode / theming 시 mass refactor.
- **Manual sync**: 매 Figma 변경 시 손으로 JSON edit — 매 drift inevitable.
- **Platform-specific token overrides**: 매 iOS 만 다른 값 — 매 cross-platform consistency 의 의미 상실.

## 🧪 검증 / 중복
- Verified (W3C Design Tokens Community Group, Style Dictionary 4.x, Tokens Studio docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — DTCG spec + Style Dictionary pipeline + 7 patterns |