디자인 토큰
디자인 토큰 (Design tokens)
디자인 토큰은 픽셀이나 hex 코드를 하드코딩하지 않고도 색, 타이포그래피, 간격, 높이(elevation) 같은 Fluent 스타일을 지정하는 데 사용하는 저장된 값이에요. 토큰 시스템 덕분에 우리는 공통 언어로 소통하면서 플랫폼과 분야 전반에 걸쳐 일관된 디자인을 보장할 수 있어요.
출처: 문서
본문
- Fluent Web UI kit — 웹용 토큰 가이드
- Fluent iOS UI kit — 모바일용 토큰 가이드
글로벌 토큰 (Global tokens)
Fluent는 두 개의 토큰 레이어를 사용해요. 먼저 글로벌 토큰은 컨텍스트와 무관하며 색상의 hex 코드 같은 원시 값을 저장해요. 글로벌 토큰은 타이포그래피, 테두리 반경, 스트로크 너비, 애니메이션 정보도 저장하죠.
별칭 토큰 (Alias tokens)
별칭 토큰은 Fluent의 두 번째 토큰 레이어로, 저장된 값에 의미론적(semantic) 의미를 더해요.
섀도우나 타이포 같은 더 복잡한 요소에 대해 별칭 토큰은 많은 값을 하나의 쉽게 소화되는 형식으로 압축해요.
별칭 명명 (Alias naming)
별칭 토큰은 그 기능이 즉시 알아보이도록 이름을 지어요. 한눈에 정확한 값을 걱정하지 않고 일관된 스타일을 어디에 어떻게 적용할지 아이디어를 얻을 수 있죠.
테마 적용 (Theming)
Fluent의 견고한 디자인 토큰은 유연성과 접근성을 위해 만들어졌어요. 즉 기본으로 토큰이 라이트, 다크, 고대비, 브랜드 요소의 OS 테마를 지원하고, 시스템 전반에 걸쳐 충분한 색 대비를 보장하죠.