2nd/10_Wiki/Topic_Programming/Frontend/Figma Tokens Studio.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-figma-tokens-studio	Figma Tokens Studio	10_Wiki/Topics	verified	self	Tokens Studio Figma Design Tokens Plugin	none	A	0.9	applied	figma design-tokens design-system		2026-05-10	pending	language framework JSON Figma Plugin

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 의 매 표현.

매 응용

1. Figma Variables sync — 매 plugin이 매 native variables 의 push.
2. Code export — Style Dictionary → CSS custom props / Tailwind theme / iOS UIColor.
3. 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