디자인 토큰은 제품 전반의 시각적 결정에 대한 유일한 진실의 원천입니다. 색상, 간격, 타이포그래피 및 모션을 명명된 변수로 인코딩하여 구성 요소가 사용합니다.
토큰의 중요성
토큰이 없으면 기본 브랜드 색상을 변경하려면 수백 개의 파일을 뒤져야 합니다. 토큰이 있으면 하나의 변수 업데이트가 버튼, 알림, 탐색 바 등 모든 곳에 전파됩니다.
토큰은 디자인 도구와 코드 간의 간극을 메우기도 합니다. 디자이너는 Figma에서 색상을 surface-brand로 이름 붙이고, 개발자는 CSS에서 var(--surface-brand)를 사용합니다. 그들은 같은 언어로 소통합니다.
실용적인 예시
배경, 테두리 및 텍스트가 필요한 구성 요소를 고려해 보세요. #1a56db, #e1effe, #1e429f를 하드코딩하는 대신, 구성 요소는 --color-primary, --surface-primary-subtle, --text-primary-strong를 참조합니다. 브랜드가 발전함에 따라 팔레트가 변경되지만 구성 요소는 변하지 않습니다.
content_image() 함수는 기본적으로 loading="lazy"를 사용하여 이미지를 렌더링하고, 캡션이 제공되면 figure 요소로 감쌉니다.
캡션 없음 — 일반 이미지, 전체 너비.
캡션 있음 — figcaption이 포함된 figure로 감쌈.
figcaption이 포함된 figure — 출처를 표시하거나 시각적 콘텐츠에 대한 맥락을 추가하는 데 사용합니다.
텍스트가 포함된 미디어
레이아웃의 1/3을 차지하는 이미지.
content--media를 사용하여 이미지와 텍스트를 나란히 배치합니다. 이미지는 너비의 1/3을 차지하고, 텍스트는 2/3을 차지합니다.
이 레이아웃은 인용구, 그림이 있는 정의 또는 이미지가 내용을 강조하지만 지배하지 않는 짧은 편집 블록에 적합합니다.
드롭캡
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
메타 바
디자인 토큰 이해하기
디자인 토큰은 제품 전반의 시각적 결정에 대한 유일한 진실의 원천입니다. 색상, 간격, 타이포그래피 및 모션을 명명된 변수로 인코딩하여 구성 요소가 사용합니다.
