Design tokens

token은 색상 및 글꼴과 같은 스타일 값을 저장하므로 designs, code, tools 및 platforms에서 동일한 값을 사용할 수 있습니다.

 

머티리얼 디자인은  color, typography, elevation, and motion values.에 대한 system 및 reference 토큰을 제공합니다.

size 측정 및 구성 요소에 대한 추가 토큰이 개발 중입니다.

 

토큰은 디자인 파일과 코드에서 동일한 스타일 값이 사용되도록 합니다.

하드코딩된 값 대신 디자인 토큰을 사용하면 디자인 시스템으로 제품을 구축, 유지 관리 및 확장하는 작업을 간소화할 수 있습니다.

 

Takeaways

Token은 플랫폼에 구애받지 않는 형식이지만 플랫폼별 코드에서 사용할 수 있습니다.
Token에는 reference, system 및  component의 세 가지 종류가 있습니다.

머티리얼 디자인은 현재 reference 및 system 토큰을 사용합니다. component 토큰이 개발 중입니다.
토큰은 디자인 시스템에서 정렬 및 일관성을 유지하는 데 도움이 됩니다.

What’s a design token?

디자인 토큰은 디자인 시스템의 시각적 스타일을 구성하는 작고 반복적인 디자인 결정을 나타냅니다. 

token은 색상의 16진수 코드와 같은 정적 값을 자체 설명 이름으로 대체합니다.

머티리얼 디자인 토큰은 두 부분으로 구성됩니다.

1. md.ref.palette.secondary90과 같은 코드형 이름

2. #E8DEF8과 같은 연관된 값

토큰의 값은 색상, 서체, 치수 또는 다른 토큰과 같은 여러 항목 중 하나일 수 있습니다.

design Token은 명확한 관계가 없어보이는  style choices 을 의미 있게 연결합니다.

예를 들어 디자이너의 mock-up 과 엔지니어의 implement이 모두 secondary container color,이라는 동일한 토큰을 참조하는 경우 설계 및 엔지니어링은 동일한 색상이 두 위치에서 사용될 것이라고 확신할 수 있습니다.

 

이 일관성은 토큰에 할당된 색상 값이 업데이트되더라도 그대로 유지됩니다.

Why are tokens important?

토큰을 사용하면 디자인 시스템이 단일 정보 소스를 가질 수 있습니다. 

style 선택 및 변경 사항을 기록하고 추적하기 위한 일종의 repository를 제공합니다.

design 및 implement에 토큰을 사용할 때 스타일 업데이트는 entire product / suite of products에 일관되게 전파됩니다.

토큰은 재사용이 가능하고 purpose-driven,이기 때문에 사용할 theme 및 contexts 에 대한 시스템 전체 업데이트를 정의할 수 있습니다. 예를 들어 토큰을 사용하여 가시성을 높이기 위해 고대비 색 구성표를 체계적으로 적용하거나 작은 텍스트를 TV에서 읽을 수 있도록 글꼴 크기를 변경할 수 있습니다.

디자인 시스템이 발전함에 따라 특정 값이 변경됩니다. 디자인 토큰은 변경 사항을 추적하고 경험 전반에 걸쳐 지속적인 일관성을 보장하는 데 도움이 됩니다.

Tokens & Material Design

과거에는 Material Design styles이  guidelines, design files, tools, and platform-specific component libraries를 통해 전달되었습니다. 이제 디자인 토큰을 사용하여 머티리얼 디자인 스타일을 다운로드, 사용자 지정 및 적용하고 디자인 및 개발 프로세스 전반에 통합할 수 있습니다. 토큰을 사용하면 플랫폼에 구애받지 않고 공유 가능한 형식으로 디자인 결정을 문서화할 수 있습니다.

 

디자인 토큰은 엔지니어와 디자이너를 위한 다양한 통합 지점과 함께 디자인 선택을 위한 중앙 리포지토리를 제공합니다.

Deciding if tokens are right for you

토큰은 다음 상황에서 가장 유용하고 효율적입니다.

- 제품 디자인을 업데이트하거나 새 제품을 만들 계획입니다.
- 디자인 시스템이 둘 이상의 제품 또는 플랫폼에 적용됩니다.
- 향후 스타일을 쉽게 유지하거나 업데이트하려는 경우
- 동적 색상과 같은 기능을 포함하여 머티리얼 디자인을 최대한 활용하고 싶습니다.

토큰은 다음과 같은 경우 덜 유용할 수 있습니다.

- 기존 앱은 향후 1~2년 동안 변경되지 않을 하드 코딩된 값을 사용합니다.
- 제품에 디자인 시스템이 없습니다.