Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

5.0 KiB

Raw Blame History

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

title

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

매 한 줄

"매 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

Primitive tokens: color.blue.500, space.4 — raw values.
Semantic tokens: color.surface.primary, space.button.padding — intent.
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.

매 응용

매 multi-product 회사 — web app + mobile + email + marketing site 의 일관성.
매 white-label / theming — runtime token swap.
매 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

5.0 KiB Raw Blame History