Antigravity Agent
153 lines
5.1 KiB
Markdown
153 lines
5.1 KiB
Markdown
---
|
|
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]] · [[Tamagui]] · [[Specify]]
|
|
- 응용: [[Dark Mode Theming]] · [[White-Label Apps]] · [[Multi-Brand Architecture]]
|
|
- Adjacent: [[Figma Variables]] · [[CSS Custom Properties]] · [[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 |
|