디자인 토큰

JSON과 같은 표준을 이해하는 모든 사람들이 사용할 수 있는 중앙 집중식 데이터(디자인 밸류 데이터베이스)

디자인 토큰은 색상(hex), 글꼴 및 스케일(px)을 참조하고 기본 단위의 디자인 속성, elements를 재사용할 수 있는 변수로 정리하여 사용하는 방식. 코딩에 그대로 활용할 수 있는 공통 언어.* MDS: Material Design System

1.서비스별 네이밍과 위계 구조

1) MDS(md+유형 ~)

value > reference > system > component

2) LINE(family service + visual element + category + value)

LDSG + typography + title + 300

3) GS shop(유형 + 목적 + 용도)

sysBackgroundPrimary

4) Asana

색상의 성격, 활용법, 강조 수준, 인터랙션 4가지 속성에 따른 유형화. 각 색상에 역할이 지정되어 특정 상황에 맞는 색상을 토큰명을 보고 호출. 글꼴도 같은 원리로 사용목적에 따라 heading, button, link, body, caption으로 세분화되고 하나의 글꼴 토큰에는 size, weight, line height, letter spacing 모두 포함. 글꼴 가짓수는 최소한으로. 

ex: 버튼을 선택하는 경우 selected/background와 selected/text 색이 입혀지는 식

5) Adobe Spectrum

Global(기본값) > Alias(목적) > Component-specific(속성)

2. 컬러 토큰 사용

  • 라이트 모드와 다크 모드에서 사용되는 색상과 회색조 색상을 나열
  • 각 컬러가 색 접근성(WCAG AA)을 통과하도록 조정
  • 화이트 라벨링용 색상은 eonardo 사이트와 material color tool 사이트를 활용
  • figma variables에 스키마로 등록

*eonardo : 색상 대비에 따른 색상 스펙트럼을 제공하고 대비 수준이나 색상 수를 조절 가능

디자인 토큰 구축 도구

  • Figgo: 정적인 디자인 토큰을 개발자용 데이터로 변환하는 피그마 플러그인
  • Theo: 대규모 디자인 시스템에서 사용
  • Style Dictionary: 대규모 디자인 시스템에서 사용, 디자인 토큰이 포함된 json을 스타일 파일로 변환하는 라이브러리
  • Google sheet
  • Arcade: SuperFriendly 디자인 시스템 전문가 제작
  • Gorko: 디자인 토큰을 CSS/SCSS로 변환
  • Goron: 디자인 토큰을 CSS/SCSS로 변환
  • Tokens Studio: https://www.youtube.com/watch?v=yvblQEPGPkM&t=2s
  • Figma Tokens: radius, 간격, 투명도나 모션도 토큰으로 제작해 사용
  • Storybook: 피그마와 싱크를 맞춰 관리(json, url, github, gitlab으로 추출하여 공유하면 개발 편의성이 높아짐)

3.MDS 토큰 예시

1) Reference token / Associated values

항목: display large

  • system token: md.sys.typescale.display-large.fontweight / md.sys.typescale.display-large.line-height
  • reference token: md.ref.typeface.brand-regular
  • default value: roboto regular / 64

2) System token / Decisions and roles

state, element, attribute, role 순서로 system token 생성

  • enabled, container, color, primary container → md.sys.color.primary-container
  • enabled, container, elevation(lowered), level1 → md.sys.elevation.level1
  • -, icon, color, on primary container  → md.sys.color.on-primary-container
  • hovered, container, elevation(default), level4  → md.sys.elevation.level4

3) Component token / Design attributes

–buttonbutton typefacedark scheme
컴포넌트comp.fab.secondary-container.colorcomp.extended-fab.secondary.label-text.font–
컴포넌트의 컬러sys.color.secondary-containersys.typescale.label-medium.fontsys.color. background
컬러의 참조ref.palette.secondary-container90ref.typeface.plain-mediumref.palette.neutral10
value#e8def8roboto medium#1c1b1f

4.결론

MDS디자인 토큰 = 피그마 local variables

  • local variables로 위계 구조별로 역할과 속성이 담긴 토큰을 저장하여 중앙 집중식으로 관리
  • 구현할 때는 플러그인, 툴을 사용하여 개발용 파일로 변환하여 사용
  • MDS의 system token과 reference token 개념을 사용할지에 대한 판단 필요
  • 테마의 여러 컬러를 토큰으로 저장하는 범위는 현재 작업 상태에서 고려를 하기는 어려우므로 라이트/다크 테마의 기본 컬러를 먼저 구축한 후 작업 예정
  • MDS 토큰 파일에서는 radius 값에 대한 정의만 확인 되어 spacing에 대한 토큰 소스 생성 방법은 추가로 조사 필요

*MDS 토큰 파일: https://github.com/material-foundation/material-tokens/tree/main