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.6 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

Figma Tokens Studio

매 한 줄

"매 Tokens Studio = Figma 안의 design token source-of-truth + Style Dictionary 연동.". 매 W3C Design Tokens Format Spec (DTCG, 2024-)에 매 align — 매 plugin이 매 token 의 JSON 의 Figma styles + variables 의 sync. 매 modern flow는 Tokens Studio → GitHub PR → Style Dictionary build → CSS/Tailwind/iOS/Android 의 multi-platform 출력.

매 핵심

매 token types

color, dimension, fontFamily, fontWeight, lineHeight, letterSpacing, opacity, borderRadius, boxShadow, typography (composite).
매 alias {global.color.primary.500} — 매 reference 의 통한 indirection.

매 sets / themes

Set: 매 token 의 그룹 (global, brand-A, light, dark).
Theme: 매 set 의 enabled combination (e.g., brand-A + light).
매 multi-brand × multi-mode 의 매 표현.

매 응용

Figma Variables sync — 매 plugin이 매 native variables 의 push.
Code export — Style Dictionary → CSS custom props / Tailwind theme / iOS UIColor.
Git sync — Tokens Studio Pro → GitHub repo, PR-based review.

💻 패턴

1. DTCG token JSON shape

{
  "color": {
    "primary": {
      "500": { "$value": "#3366FF", "$type": "color" }
    }
  },
  "spacing": {
    "md": { "$value": "16px", "$type": "dimension" }
  },
  "typography": {
    "heading-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "{font.size.xl}",
        "fontWeight": 700,
        "lineHeight": 1.2
      }
    }
  }
}

2. Alias / reference

{
  "color": {
    "brand": { "$value": "#FF5500", "$type": "color" },
    "button": {
      "primary": { "$value": "{color.brand}", "$type": "color" }
    }
  }
}

3. Style Dictionary config

// sd.config.js
import StyleDictionary from 'style-dictionary';

export default {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }],
    },
    tailwind: {
      transformGroup: 'js',
      buildPath: 'build/tw/',
      files: [{ destination: 'theme.js', format: 'javascript/module' }],
    },
    ios: {
      transformGroup: 'ios-swift',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }],
    },
  },
};

4. CSS output

:root {
  --color-primary-500: #3366ff;
  --spacing-md: 16px;
}

5. Tailwind preset from tokens

// tailwind.config.js
import tokens from './build/tw/theme.js';

export default {
  theme: {
    colors: tokens.color,
    spacing: tokens.spacing,
    fontFamily: { sans: tokens.font.family.sans },
  },
};

6. Themes via attribute

[data-theme='light'] { --color-bg: #ffffff; }
[data-theme='dark']  { --color-bg: #0b0b10; }

body { background: var(--color-bg); }

7. GitHub Action (build on PR merge)

name: tokens-build
on:
  push:
    branches: [main]
    paths: ['tokens/**']
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci && npm run tokens:build
      - run: |
          git config user.email bot@acme.dev
          git config user.name token-bot
          git add build && git commit -m "chore(tokens): build" || true
          git push

8. Figma Variables JSON (native, post-2024)

// figma plugin code (post-2024 Variables API)
const collection = figma.variables.createVariableCollection('Brand');
const v = figma.variables.createVariable('color.primary.500', collection.id, 'COLOR');
v.setValueForMode(collection.modes[0].modeId, { r: 0.2, g: 0.4, b: 1, a: 1 });

매 결정 기준

상황	Approach
단일 brand	Tokens Studio Free + JSON export.
Multi-brand / Pro	Tokens Studio Pro + GitHub sync.
Native Figma only	Figma Variables direct.
Multi-platform code	Style Dictionary build pipeline.
매 component spec	Tokens + auto-generated docs.

기본값: Tokens Studio + DTCG JSON + Style Dictionary + Tailwind.

🔗 Graph

부모: Design Tokens · Design System
변형: Figma Variables
응용: Style Dictionary Pipelines · Component Library
Adjacent: CSS_Architecture_and_Styling

🤖 LLM 활용

언제: 매 token JSON 의 scaffolding, Style Dictionary config, 매 alias 검증. 언제 X: 매 visual review — Figma 안에서 매 designer 의 confirm.

❌ 안티패턴

Hard-coded hex in code: 매 token bypass — drift 발생.
Token name with semantic in global: 매 color.button 의 global 안에 — 매 brand layer 분리.
No alias: 매 매 component-level token 의 raw value — refactor 의 어려움.
Manual sync: 매 designer가 매 figma update + dev가 매 code update — 매 GitHub action 자동화.

🧪 검증 / 중복

Verified (tokens.studio docs 2024-2026, DTCG spec).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Tokens Studio + DTCG + Style Dictionary

5.6 KiB Raw Blame History Unescape Escape