[9월 2주차] Material Designs 3 - Design tokens

What's a design token?

디자인 토큰이란, 디자인 시스템의 시각적인 스타일을 완성시키는 "작게 반복되는 디자인 결정" 단위를 의미한다. 토큰으로써 해당 요소의 디자인 속성을 설명함에 따라 컬러를 의미하는 헥스 코드와 같은 정적인 값을 대체할 수 있다.

 

Material Design Token은 2가지의 부분으로 구성되어 있다.

1) md.ref.palette.secondary90와 같이 코드처럼 생긴 이름

2) #E8DER8과 같이 연관되어 설명하고 있는 이름

 

토큰의 값은 컬러, 타이포, 측정치, 또는 다른 토큰의 값 중 하나가 될 수 있다.

디자인 토큰을 사용함에 따라 서로 명확환 관계성을 잃을 수도 있었던 스타일 요소들이 의미있게 연결될 수 있다.

예를 들어, 디자이너의 시안과 개발자의 결과물이 둘 다 'Secondary container color"라는 토큰을 사용하면, 그 둘의 결과물도 일관적일 것이라는 자신감을 가질 수 있다. 토큰에 적용된 컬러 값이 변경되더라도 같은 토큰을 사용하고 있다면 결과물의 일관성을 여전히 기대할 수 있다.

 

 

Why are tokens important?

토큰은 전체 디자인 시스템의 원천을 하나로 통일한다. 디자인과 관련된 결정 및 변경사항을 기록할 수 있는 저장소와 같은 역할을 하게 되는 것이다. 

 

디자인 및 개발에 토큰을 사용하면, 토큰의 스타일 요소가 변경될 때 해당 토큰이 사용된 모든 요소도 일관되게 변경될 수 있다. 토큰은 재사용 가능하며 목적 지향적인 요소이기 때문에 시스템 전체를 정의할 수 있을 정도의 영향력을 갖고 있는 것이다. 

 

 

Tokens & Material Design

과거에는 가이드라인, 디자인 파일 등을 활용해 디자인 스타일을 주고 받곤 했다. 디자인 토큰을 사용하면, 토큰에 담긴 스타일을 다운로드하고 개인의 필요에 따라 바꿀 수 있다. 토큰을 사용함에 따라 디자인과 관련된 결정들이 '공유 가능한 형식'으로 기록될 수 있다.

 

근시일 내에 제품의 디자인을 변경하거나 새로운 제품을 만들 계획이 있는 경우, 하나의 디자인 시스템으로 한 개 이상의 제품을 만들고 있는 경우에는 토큰을 사용하는 것의 이점을 크게 실감할 수 있다. 그러나 현재 맡고 있는 제품이 향후 1-2년 내에 변경 계획이 없는 코드 값이 적용되어 있는 경우 또는 제품에 디자인 시스템이 없는 경우에는 토큰이 크게 유용하지 않을 수 있다.

 

---

How to find tokens (임의 추가 문단)

하나의 컴포넌트를 구성하는 요소를 위계 삼아 토큰을 찾아가는 식! 예를 들어, '활성화된 글쓰기 버튼'의 그림자 스타일을 알고 싶다면 아래와 같은 방식으로 찾을 수 있음

 

1) State이 Enabled 이고

2) Element가 Container 이고

3) Design attribute이 Shadow Color인 행을 찾아서 그림자와 관련된 스타일 토큰을 찾는다!

 

 

Reading token names

A : 이 토큰이 포함된 디자인 시스템의 약어를 표시한다. 예를 들어 Material Design 시스템의 토큰은 md로 시작

B : 토큰의 타입을 표시한다. ref (레퍼런스 토큰), sys (시스템 토큰), comp (컴포넌트 토큰)

C : 토큰의 역할 또는 목적을 간략히 묘사한다

 

Types of Tokens

+) 토큰 타입의 종류 서치를 해보며 Adobe Spectrum에서 비슷한 개념으로 유추되는 사례를 찾아 함께 메모

https://spectrum.adobe.com/page/design-tokens/

Spectrum, Adobe’s design system

Reference Token : Adobe의 Global Token과 비슷한 개념

• 디자인 시스템 전역에 사용되는 기본적인 컬러, 폰트 등 주로 정적인 값을 가지는 요소를 정의
• ex. blue-400

System Token : Adobe의 Alias Token과 비슷한 개념

• 디자인 시스템에 성격을 부여하는 컬러, 타이포 등을 정의
• ex. cta-background-color

Component Token : Adobe의 Component-specific Token과 비슷한 개념

• 특정 컴포넌트에 연관되는 속성을 대표하는 토큰
• ex. button-cta-background-color

---

Contexts : Different default values

상황에 따라 토큰은 다른 값을 가리키는 경우가 생긴다. 이러한 상황을 'context'라고 부르고, 그 맥락에 적용되는 값은 'contextual values'이라고 부른다. 가장 대표적인 예시가 다크모드/라이트모드 와 같은 상황이다.

ex. md.sys.color.background 값 -> 라이트모드에서는 #FFFBFE, 다크모드에서는 #1C1B1F