TIL 260305 디자인 토큰, 멘토링

디자인 토큰

https://uxdesign.cc/design-tokens-cheatsheet-927fc1404099

Design tokens cheatsheet

Design Systems and Tokens

As Systems designers, it is our duty to optimize at scale the experiences of Designer and Developers when consuming our product; the system itself. If the organization of style primitives is not prioritized, there will be a lot of friction between designer and developer as well as many stylistic inconsistencies that could be avoided by having a token architecture.

A healthy and extensible Design System uses Design Tokens. It does not just use variables.

 

https://hackernoon.com/using-animationmotion-design-tokens-for-more-complex-and-sophisticated-design-zy3t33y5

Animation/Motion Design Tokens for Complex Design Systems | HackerNoon

Design Systems and Animation

In an attempt to standardize some of those 4 parts in Animation Design (mainly easing and duration), most Design Systems use Motion Design Tokens.

 

However, giving these to designers and developers presents some challenges. To start, they are not technically Design Tokens; they are variables. Ideally, Tokens should communicate intent within a context/interaction and let designers and developers know when and how to use a particular design decision by just reading the name (a.k.a token).

In big organizations, with hundreds of designers and thousands of developers, making these variables available by themselves may create inconsistencies as every designer chooses slightly different variables for similar transitions.

디자인 토큰을 만들어야 하는 이유는 결국, 작업 효율성(*일관성유지, 보수 등의 면에서의)을 위해서이다.

 

디자인 토큰 계층

1. global token : 변수 지정이 되지 않은 원시상태의 값을 말한다. (컬러로 치면 #123456 같은 값, 폰트로 치면 16pt 같은 값)
2. alias token : global 토큰에 의미를 부여해 목적을 명확히 한 상태. (예시 ; primary-color : #123456)
3. component token : 특정 컴포넌트에 사용되는 토큰으로 컴포넌트에 특정 스타일을 지정하기 위함. (예시 ; button-background: primary-color)
4. state/variant token : 컴포넌트 상태별 스타일 변화를 정의하기 위한 토큰. (예시 ; button-hover-background: primary-dark)

디자인 토큰의 주요 유형

유형	예시	활용 분야
색상 (Color)	#FF5733, rgba(0,0,0,0.1)	브랜드, UI 배경, 텍스트
타이포그래피 (Typography)	폰트 패밀리, 사이즈, 굵기, 줄 높이	제목, 본문, 라벨
간격 (Spacing)	8px, 16px, 24px	마진, 패딩, 갭
크기 (Sizing)	너비, 높이 규격	컴포넌트 크기
그림자 (Shadow)	0 2px 8px rgba(0,0,0,0.1)	깊이 표현, 강조
테두리 (Border)	굵기, 스타일, 반지름	테두리, 모서리
지속성 (Duration)	200ms, 400ms	애니메이션 속도
곡선 (Easing)	ease-in, ease-out	애니메이션 타이밍
불투명도 (Opacity)	0.5, 0.8	비활성 상태, 배경

 

 

네이밍하기

camel case, pascal case (x), kebab-case나 . 사용하기

* camel Case :

• 첫 단어는 소문자
• 두 번째 단어부터 대문자로 시작
• 낙타 등처럼 중간이 올라간다고 해서 camel 🐫

 

* Pascal Case :

• 모든 단어의 첫 글자를 대문자
• camelCase와 비슷하지만 첫 단어도 대문자

 

* kebab-case :

• 단어 사이를 하이픈(-)으로 연결
• - 또는 . 사용하기
• 너무 긴 이름 x
• 소문자만 사용

* snake case : 

 

• 모든 단어를 소문자로 작성
• 단어 사이를 _ 로 연결
• 모양이 뱀이 기어가는 것 같다고 해서 snake 🐍

 

tip 개발자도구에서 select an element in the page to inspect it 아이콘으로 디자인 토큰 내용 확인할 수 있음

tip 디자인토큰은 배리어블로 관리

 

https://www.krds.go.kr/html/site/style/style_07.html

디자인 토큰(Design Token) | 스타일 가이드 - KRDS

https://www.krds.go.kr/html/site/style/style_07_popup.html

 

디자인 토큰 전체 보기 | 디자인 토큰 - KRDS

---

이날 멘토링에서 도널드 노먼의 책을 추천받았다.

이 중 가장 기본 중의 기본이라고 하는 도널드 노먼의 사용자 중심 디자인을 구매하였다.

 

프디가 공부하고 파고들려면 분야가 끝도 없이 많아서 어려우면서도 재밌는 분야다. 마케팅, 심리, 라이팅, 미학적 디자인, 설계 디자인, 기획, 브랜딩 등등 그동안 내가 관심있게 보고 공부하던 모든게 프로덕트 디자이너가 되는 길이라니 신난다.