[Design System] Color Token
Figma Design System - -Foundation
토큰과 베리어블을 헷갈려 하는 경우가 많은데
기본적으로 이런 변수를 Token이라 명칭하고,
디자인시스템에서 이러한 Token를 만들 수 있게 하는 '기능'이 Variable이다.
Token이란?
디자인시스템에서 반복적으로 사용되는 디자인 속성(색상, 폰트, 간격)을 변수로 정의한 코드나 값.
Variable이란?
디자인 시스템에서 디자인 속성에 이름과 목적을 부여하고, 상황에 따라 값을 변경할 수 있게 하는 기능.
왜 사용하는가?
- 디자이너와 개발자는 UI 기본 구성요소를 매번 만들지/하드코딩하지 않고 '디자인 토큰'을 사용한다.
- 패턴을 재사용하여 -> 확장/유지보수가 편리하게 도와준다.
- 디자이너와 개발자간의 약속, 효율적으로 관리할 수 있다.
원칙
- Atomic Design
모든 컴포넌트를 위로 따라가다 보면 작은 원자단위의 약속이 있다.
- single source of truth, SSOT
“Tokens enable a design system to have a single source of truth. They provide a kind of repository for recording and tracking style choices and changes.” - 위키피디아
W3C 디자인 토큰 가이드 라인
Design Tokens Format Module의 디자인 토큰 가이드 라인
디자인 값을 표준화된 형식으로 토큰(베리어블)어떻게 저장할 지 설명해놓은 문서이다.
https://www.designtokens.org/tr/drafts/format/
1. 토큰의 구조
토큰을 자세히 보면!
{
"White" : { - 토큰이름
"value" : "#FFFFFF", - 값
"style" : "color",
"description" : "기본색상"
}
}
구글 머티리얼 디자인 토큰
토큰이름 : md.ref.palette.secondary90
값 : #E8DEF8 (hex code)
이 토큰 상위에 폴더로 묶여 있다.
구조
Brand - Color - White
Brand - Typography - H1
Brand - Spacing - L
2. 토큰의 계층 (Token Hierarchy)
이해를 돕기 위해 작성자가 그린 이미지입니다. (Adobe, Material Design 3 참고)우리 회사에서는 basic - theme - semantic 을 사용하고 있는데,
chakra, atlassian에서는 base - semantic 두가지만 활용하고 있었다.
우리는 여러가지 브랜드를 대응해야 하고, 테마를 제공해야 하기 때문에
theme으로 세분화하였다.
실제로 브랜드측 사용자가 건드는 부분은 basic 레벨이고,
우리가 규정해놓은 규칙(semantic)대로 테마가 적용된다.
3. 토큰의 명칭
네이밍 원칙
- Meaningful 의미적
- Logical 논리적
- Consistent 일관된
- Module 모듈화
주의할 점
- 개발자-디자이너간 협의
- 중복, 혼동 단어 통일
- 스케일 통일 ??
- 미리 80% 정도는 계획 하기
- 2~3개 정도의 레퍼런스 단위부터 차근차근 만들어본다
*개인적으로는 확장성을 어디까지 가져갈 것인가, 얼마나 세분화할 것인가가 중요한 것 같다.
토큰 네이밍 패턴
Namespace (System) - Object(Component) - Base(Category, Property) - Modifier(Variant, State, Scale)
Material 에서는 예를 들어 이렇게 표시한다.
--md-button-color-background-hover
*Base : 각 카테고리 내 특성에 따라 세분화된다.
카테고리별 특성
color : color-brand, color-background, color-border, color-textm, color-textlink ...
font : font-style, font-size, font-weight, font-letterSpacing, font-lineHeight
sizing : sizing-border, sizing-square, sizing-width
spacing
radius
opacity
elevation
breakpoints
shadow
duration
...
*Modifier : 상황, 상태를 변형하기 위해 쓰인다.
Variant : Hierarchy(Primary, secondary, tertiary) / Feedback(success, error, information, warning)
State : Interactive states (default, hovered, pressed/active), focused, disabled, visited, error
Scale : 숫자Numeric order(1,2,3,4,...), T-shirt(xs,sm,md,lg,xl), 강도Intensity(low,moderate, strong, extreme), 세기strength(low, moderate, strong, extreme)스피드Speed(instant, immediate, quick, fast, moderate, slow)
