2nd/10_Wiki/Topics/Domain_Programming/Frontend/크로스 플랫폼 디자인 시스템 연동.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-크로스-플랫폼-디자인-시스템-연동	크로스 플랫폼 디자인 시스템 연동	10_Wiki/Topics	verified	self	Cross-Platform Design System Multi-Platform Tokens	none	A	0.9	applied	design-system frontend mobile tokens theming		2026-05-10	pending	language framework typescript 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

{
  "color": {
    "blue": { "500": { "$value": "#3b82f6", "$type": "color" } },
    "surface": {
      "primary": { "$value": "{color.blue.500}", "$type": "color" }
    }
  }
}

2. Style Dictionary config

// 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

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

4. React Native (Tamagui) usage

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

5. Swift output

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)

function setTheme(theme: 'light' | 'dark' | 'high-contrast') {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
}

7. Figma → tokens sync (Tokens Studio plugin)

# .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
• 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