DTCG · Tailwind · Figma와의 관계

# Design Tokens

DESIGN.md may embed design tokens in a structured format. The system that we use to describe design tokens is inspired by the
[Design Token JSON spec](https://www.designtokens.org/tr/2025.10/format/#abstract). Specifically, we adopt the concept of typed token groups (colors, typography, spacing) and the `{path.to.token}` reference syntax for cross-referencing values.

These tokens are easily converted from or to `tokens.json`, Figma variables, and Tailwind theme configs.

DESIGN.md는 갑자기 튀어나온 포맷이 아니에요. 디자인 토큰 업계에 이미 있던 아이디어를 계승하고, 주요 도구들과 연결되도록 설계됐어요.

L12The system that we use to describe design tokens is inspired by the Design Token JSON spec. Specifically, we adopt the concept of typed token groups (colors, typography, spacing) and the {path.to.token} reference syntax for cross-referencing values.

DTCG가 뭐예요?

DTCG(Design Tokens Community Group)는 W3C 산하 그룹이에요. 디자인 토큰을 어떻게 JSON으로 표현할지 업계 표준을 만들어요. Figma·Adobe·Salesforce 같은 회사들이 참여해요.

DTCG와 공통점

• 타입별 토큰 묶음 (colors · typography · spacing 등)
• 참조 문법 {path.to.token} (DTCG에서는 "alias"라고 부름)
• Dimension · Color · Typography 같은 값 타입 체계

DTCG와 차이점

Tailwind와는 어떻게 연결될까

대부분의 웹 프론트엔드가 Tailwind를 써요. export --format tailwind로 아래처럼 매핑돼요.

• colors.xxx → theme.colors.xxx
• typography.xxx → theme.fontSize·fontFamily 조합
• rounded.xxx → theme.borderRadius.xxx
• spacing.xxx → theme.spacing.xxx
• components는 제외 (Tailwind의 유틸리티 조합 철학 존중)

DESIGN.md가 "허브"인 이유

DESIGN.md가 가장 풍부한 원본이에요. 건강한 파이프라인은 DESIGN.md를 진짜 원본(single source of truth)으로 삼고, Tailwind 설정·Figma 변수는 거기서 자동 생성해서 파생물로 두는 방식이에요.

Figma와는?

DTCG를 경유해서 간접적으로 연결돼요. Figma Variables → DTCG 플러그인 → DESIGN.md import의 흐름이 가능해요. 반대 방향도 가능. 다만 실시간 양방향 동기화는 아직 없어요(alpha 단계의 한계).