Design tokens, 2014년 Salesforce의 Jina Anne

한 줄로

디자인의 색, 간격, 폰트를 변수로 만들어 모든 플랫폼에 동기화하는 시스템입니다. 2014년 Salesforce에서 한 디자이너가 도입한 개념입니다.

어디서 왔나

2014년, Salesforce의 디자인 시스템 Lightning을 개발하던 지나 앤(Jina Anne)과 동료들이 한 가지 문제에 부딪혔습니다. 같은 회사 제품이 웹, iOS, Android, 메일에서 색이 미묘하게 달랐습니다. 디자이너가 "회사 파란색"을 정해도, 각 플랫폼이 다른 색 시스템(RGB, HEX, sRGB, P3)을 쓰니 일관성이 깨졌습니다.

해법은 추상화 계층이었습니다. 디자인의 가치를 이름이 붙은 변수로 정의하고, 각 플랫폼이 그 변수를 자기 시스템으로 번역하게 했습니다.

color-brand-primary = #1589EE
spacing-medium = 16px
font-size-heading-large = 32px

이 변수가 design token입니다. 디자이너가 한 곳에서 값을 바꾸면, 모든 플랫폼에 자동 반영됩니다.

2017년 W3C에 Design Tokens Community Group이 결성됐습니다. 2024년 현재 W3C 표준화 작업이 진행 중입니다.

구조 (3계층)

좋은 토큰 시스템은 3계층으로 나눕니다.

1. Global tokens (원시 값): color-blue-500: #1589EE
2. Alias tokens (의미 부여): color-brand-primary: {color-blue-500}
3. Component tokens (컴포넌트별): button-background: {color-brand-primary}

이렇게 하면 브랜드 색이 바뀌어도 두 번째 계층 한 곳만 수정하면 됩니다.

도구

• Style Dictionary (Amazon, 2018): 디자인 토큰을 각 플랫폼별 코드로 변환.
• Figma Variables (2023): 디자인 도구 안에서 토큰 정의.
• Tokens Studio (Figma 플러그인): 더 정교한 토큰 관리.

바이브 메이커가 챙길 한 가지

1인 랩에서도 디자인 토큰은 가치 있습니다. 색 5~10개 + 간격 4단계 + 폰트 크기 5단계만 CSS 변수로 정의해 둬도 일관성이 크게 올라갑니다. Tailwind CSS의 기본 스케일이 사실상 사전 정의된 디자인 토큰 시스템입니다.

관련

Atomic design · Theming · Material Design