[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,91 +2,202 @@
|
||||
id: wiki-2026-0508-figma-tokens-studio
|
||||
title: Figma Tokens Studio
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Tokens Studio, Figma Design Tokens Plugin]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [figma, design-tokens, design-system]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: JSON
|
||||
framework: Figma Plugin
|
||||
---
|
||||
|
||||
# [[Figma Tokens Studio|Figma Tokens Studio]]
|
||||
# Figma Tokens Studio
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
[[Figma|Figma]] Tokens Studio(과거 명칭: Figma Tokens)는 디자이너가 색상, 서체, 간격과 같은 디자인 결정(디자인 토큰)을 JSON 형식으로 구조화할 수 있게 해주는 Figma 플러그인입니다 [1]. 이 도구를 활용하면 Figma에서 작업한 토큰을 외부 파일로 내보내어 코드 기반의 디자인 시스템과 동기화할 수 있습니다 [1, 2]. 확장성 있는 UI 시스템에서 디자인과 개발 워크플로우를 연결하여 일관된 테마를 구축하는 데 필수적인 역할을 합니다 [1, 3].
|
||||
## 매 한 줄
|
||||
> **"매 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 출력.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **디자인 토큰의 JSON 구조화 및 추출**: Tokens Studio for Figma는 디자이너가 내린 디자인 결정들을 플랫폼에 구애받지 않는 JSON 데이터로 정의하고 내보낼 수 있도록 지원합니다 [1].
|
||||
* **테마 생성 엔진과의 파이프라인 연동**: 이 플러그인을 통해 내보낸 테마별 JSON 토큰 파일(예: `colors-light.json`, `colors-dark.json`)은 [[Style Dictionary|Style Dictionary]]와 같은 오픈소스 테마 엔진과 결합하여 사용할 수 있습니다 [4, 5]. 이 과정을 통해 React 애플리케이션 등에서 직접 사용할 수 있는 [[JavaScript|JavaScript]]/TypeScript 테마 객체나 CSS 변수로 자동 변환됩니다 [4].
|
||||
* **단일 진실 공급원([[Single_Source_of_Truth|Single Source of Truth]]) 유지**: Tokens Studio와 같은 플러그인을 통해 토큰을 추출하여 공유 리포지토리나 코드베이스로 동기화함으로써, 디자이너와 개발자 간에 동일한 디자인 언어(디자인 토큰)를 공유할 수 있습니다 [2, 3]. 이는 다중 테마, 다크 모드, 여러 브랜드 스타일을 수동 코드 작성 없이 안전하게 확장할 수 있게 해줍니다 [1, 3].
|
||||
* *참고: 소스에 관련 정보가 부족합니다.* (Figma Tokens Studio 플러그인 자체의 구체적인 내부 사용법이나 세부 기능에 대한 구체적인 설명은 소스에 포함되어 있지 않으며, 주로 Style Dictionary를 활용한 JSON 토큰 추출 파이프라인의 일부로만 언급됩니다 [1, 2].)
|
||||
## 매 핵심
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[Design Tokens|Design Tokens]], Style Dictionary, CSS Variables, [[Dynamic Theming|Dynamic Theming]]
|
||||
- **Projects/Contexts:** Scalable UISystems, Design-to-Code Workflow
|
||||
- **Contradictions/Notes:** 소스 데이터는 Figma Tokens Studio의 작동 원리나 전체 기능에 대해 깊이 다루지 않습니다. 단지 디자이너가 만든 토큰을 코드로 가져오기 위해 JSON 형태로 내보내는 도구(플러그인)로써의 역할에만 초점을 맞추고 있으므로, 소스에 관련 정보가 부족합니다 [1, 2].
|
||||
### 매 token types
|
||||
- color, dimension, fontFamily, fontWeight, lineHeight, letterSpacing, opacity, borderRadius, boxShadow, typography (composite).
|
||||
- 매 alias `{global.color.primary.500}` — 매 reference 의 통한 indirection.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
### 매 sets / themes
|
||||
- **Set**: 매 token 의 그룹 (global, brand-A, light, dark).
|
||||
- **Theme**: 매 set 의 enabled combination (e.g., brand-A + light).
|
||||
- 매 multi-brand × multi-mode 의 매 표현.
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 매 응용
|
||||
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.
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
## 💻 패턴
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
### 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### 2. Alias / reference
|
||||
```json
|
||||
{
|
||||
"color": {
|
||||
"brand": { "$value": "#FF5500", "$type": "color" },
|
||||
"button": {
|
||||
"primary": { "$value": "{color.brand}", "$type": "color" }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### 3. Style Dictionary config
|
||||
```javascript
|
||||
// sd.config.js
|
||||
import StyleDictionary from 'style-dictionary';
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
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' }],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### 4. CSS output
|
||||
```css
|
||||
:root {
|
||||
--color-primary-500: #3366ff;
|
||||
--spacing-md: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### 5. Tailwind preset from tokens
|
||||
```javascript
|
||||
// tailwind.config.js
|
||||
import tokens from './build/tw/theme.js';
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
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]] · [[Specify]] · [[Supernova]]
|
||||
- 응용: [[Style Dictionary]] · [[Tailwind Theme]] · [[Component Library]]
|
||||
- Adjacent: [[DTCG]] · [[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 |
|
||||
|
||||
Reference in New Issue
Block a user