디자인 시스템을 위한 디자인 토큰
이전에 디자인 토큰 관련 포스팅을 했는데 좀 부실한 거 같아 다시 좋은 아티클 발견해서 공유합니다.
A Design System’s strength comes from knowing how and when to apply options (like purple-40 or color-warning) correctly to contexts (like backgrounds or typography). This grounds the option as a design decision or what is known as a Design Token in System Design.
디자인 시스템의 강점은 옵션(예: purple-40 혹은 color-warning)을 콘텍스트(배경 또는 타이포그래피)에 맞게 적용하는 방법과 시기를 아는 것에 있습니다. 이것은 디자인 결정 혹은 시스템 디자인에서 디자인 토큰으로 알려진 옵션을 기반으로 합니다.
-
Design Token (noun): Design v̶a̶r̶i̶a̶b̶l̶e̶s̶ decisions applied to a specific context.'
Variables ≠ Design Tokens
디자인 토큰은 하나의 방법론입니다. "디자인 토큰은 그냥 변수라고 말하는 것은 마치 반응형 디자인은 그냥 미디어 쿼리라고 말하는 것과 같다고 봅니다." "디자인 토큰은 웹, 네이티브 등을 포함한 여러 플랫폼과 디바이스에 걸쳐 디자인을 확장하기 위한 기술에 구애받지 않는 아키텍처 및 프로세스입니다."
변수는 불분명한 벨류인 상황에서 그 의문점을 해결해주지만 네이밍(naming)과 사용(use) 사이의 차이를 좁히지는 못합니다. 예를 들어 변수는 "어떤 선택지가 있는가?"라고 대답하면서도 "그러면 어떤 선택을 해야 할 것인가?"라는 불분명하게 여운이 남습니다.
디자인 토큰은 하드 코딩된 값과 변수 대신 사용되어 모든 제품 경험 또는 플랫폼에 걸쳐 유연성과 통합성을 보장합니다. 또한 플랫폼에 구애받지 않기 때문에 이러한 용어를 사용하여 개발자와 더 쉽게 커뮤니케이션할 수 있습니다.
Token types
강력하고 확장 가능한 토큰 아키텍처를 구성하는 방법은 얼마나 많은 추상적 개념 수준을 갖느냐에 따라 달라집니다.
"purple-500"은이 색상을 어디에 어떻게 적용해야 하는지에 대한 설명이 없습니다. 그러나 "color-action"은 어디에 어떻게 적용해야 하는지 알려줍니다. (텍스트 링크 및 버튼과 같은 상호 작용 요소). 이러한 경우 버튼 컴포넌트가 사용됩니다.
Values
색상 값, 절대 및 상대 길이 단위, 백분율, 숫자 등과 같은 코드의 기본 값(벨류)입니다.
Base Variables
기본 변수는 콘텍스트에 구애받지 않는 이름으로 표시되는 디자인 언어의 기본 값입니다. 이들은 직접 사용할 수 있으며 다른 모든 토큰 유형에 상속됩니다.
Common *Tokens*
공통 토큰은 특정 콘텍스트 또는 추상적 개념과 관련 있습니다. 공통 토큰은 토큰의 의도된 목적을 전달하는 데 도움이 되며 단일 의도를 가진 값이 여러 위치에 나타날 때 효과적입니다.
Component *Tokens*
컴포넌트 토큰은 이를 사용하는 특정 컴포넌트와 관련이 있습니다. 그들의 범위는 오직 그들이 속한 컴포넌트만을 대상으로 하는데, 컴포넌트 토큰은 대상 속성뿐만 아니라 해당 상태(states)도 전달합니다.
Anatomy of a Design Token and Organization
토큰 이름은 기본 값을 보지 않고도이 토큰을 사용해야 하는 시기와 위치를 전달하는 엄격한 명명 규칙을 따릅니다.
위의 토큰은 복잡하지만 하나의 구체적 이야기를 설명하고 있습니다. 문서나 벨류를 보지 않고도 디자이너와 개발자 모두 카드나 섹션과 같은 컨테이너의 배경에 사용되는 색상 토큰이라고 말할 수 있습니다. 또한 계층 구조를 전달하는 다양한 변형이 있을 수 있음을 전달하고 해당 표면의 특정 상태를 대상으로 한다는 것도 전달합니다.
Design and code
Figma를 사용하는 경우 디자이너가 직관적으로 사용할 수 있도록 토큰을 구성할 수도 있습니다. 또한 디자인을 쉽게 지정 / 수정할 수 있습니다.
스케치도 쉽게 됩니다...
Design Systems and Tokens
시스템 디자이너로서 제품을 소비할 때 디자이너와 개발자의 경험을 대규모로 최적화하는 것은 우리의 의무입니다. 시스템 자체. 스타일 프리미티브 구성이 우선순위가 지정되지 않으면 디자이너와 개발자 사이에 많은 마찰이 있을 뿐만 아니라 토큰 아키텍처를 통해 피할 수 있는 많은 스타일 불일치가 있을 것입니다.
건강하고 확장 가능한 디자인 시스템은 디자인 토큰을 사용합니다.
https://uxdesign.cc/design-tokens-cheatsheet-927fc1404099
