2nd/10_Wiki/Topics/Frontend/Figma Tokens Studio.md

---
id: wiki-2026-0508-figma-tokens-studio
title: Figma Tokens Studio
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Tokens Studio, Figma Design Tokens Plugin]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [figma, design-tokens, design-system]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JSON
  framework: 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
```json
{
  "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
```json
{
  "color": {
    "brand": { "$value": "#FF5500", "$type": "color" },
    "button": {
      "primary": { "$value": "{color.brand}", "$type": "color" }
    }
  }
}
```

### 3. Style Dictionary config
```javascript
// 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
```css
:root {
  --color-primary-500: #3366ff;
  --spacing-md: 16px;
}
```

### 5. Tailwind preset from tokens
```javascript
// 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
```css
[data-theme='light'] { --color-bg: #ffffff; }
[data-theme='dark']  { --color-bg: #0b0b10; }

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

### 7. GitHub Action (build on PR merge)
```yaml
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)
```javascript
// 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|Style Dictionary]] · [[Component Library]]
- Adjacent: [[CSS_Architecture_and_Styling|CSS Variables]]

## 🤖 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 |