DTCG

• DTCG는 Design Tokens Community Group의 약자
• Design Token을 여러 도구와 플랫폼 사이에서 교환하기 위한 표준화 JSON 포맷
• Pencil, Figma, Tokens Studio, Style Dictionary 같은 도구들이 같은 토큰 데이터를 이해하도록 만들기 위한 상호운용성 규격

해당 개념이 필요한 이유

• 디자인 도구마다 토큰 저장 방식이 달라도 공통 JSON 포맷으로 변환해 연결하기 위해 필요하다.
• Style Dictionary 같은 변환 도구가 토큰의 타입과 값을 안정적으로 해석하기 위해 필요하다.
• 특정 vendor나 특정 디자인 툴에 종속되지 않고 디자인 시스템 데이터를 공유하기 위해 필요하다.

AS-IS

{
  "color": {
    "background": {
      "brand": {
        "value": "#ff8a65",
        "type": "color"
      }
    }
  }
}

TO-BE

{
  "color": {
    "background": {
      "brand": {
        "$value": "#ff8a65",
        "$type": "color"
      }
    }
  }
}

DTCG JSON의 핵심 필드

DTCG 포맷은 디자인 토큰 속성에 $ prefix를 사용한다. 핵심 필드는 다음과 같다.

{
  "$description": "OhMyBaby light theme tokens",
  "color": {
    "background": {
      "brand": {
        "$type": "color",
        "$value": "#ff8a65",
        "$description": "Primary brand background color"
      }
    }
  },
  "dimension": {
    "card": {
      "radius": {
        "$type": "dimension",
        "$value": "0.75rem"
      }
    }
  }
}

$type은 값의 종류를 알려준다. 예를 들어 color, dimension, fontFamily, duration, typography 같은 타입이 있다. 변환 도구는 이 타입을 보고 색상은 Flutter Color, CSS color, Android color resource처럼 바꾸고, 크기는 dp/sp/px/double처럼 플랫폼에 맞게 바꾼다.

$value는 실제 값이다. 이 값은 원시값일 수도 있고 다른 토큰을 참조할 수도 있다.

DTCG와 Style Dictionary의 관계

DTCG는 포맷이고, Style Dictionary는 그 포맷을 읽어 플랫폼별 산출물을 만드는 도구다. 둘은 같은 것이 아니다.

sequenceDiagram
    autonumber
    participant Figma as Figma or Pencil
    participant DTCG as DTCG Token JSON
    participant SD as Style Dictionary
    participant Platform as Flutter CSS iOS Android
    Figma->>DTCG: 도구별 exporter 또는 extractor로 정규화
    DTCG->>SD: 표준 토큰 입력
    SD->>Platform: 플랫폼별 코드 생성

현재 프로젝트에서는 Style Dictionary 설정에 usesDtcg: true가 들어가 있다. 이 설정은 입력 token JSON을 DTCG 방식으로 해석하겠다는 의미다.

DTCG와 screen spec JSON의 차이

DTCG는 디자인 토큰 포맷이다. 색상, 크기, 글꼴 같은 스타일 결정을 표현한다. 반면 screen spec JSON은 화면 구조를 표현한다. 예를 들어 frame, children, layout, padding, text content, icon 같은 정보는 screen spec에 들어가지만 Style Dictionary가 변환하는 DTCG token JSON과는 목적이 다르다.

따라서 현재 프로젝트에서 구분은 다음과 같다.

DTCG token JSON: Style Dictionary 입력
screen spec JSON: 화면 구현 참고용 구조 데이터

참고 문서

• Design Tokens Format Module
• Style Dictionary - DTCG
• Style Dictionary - Design Tokens