14 Tokens Synced

Design Tokens

토큰 하나를 바꾸면 디자인 전체가 바뀝니다. 테마 설정과 커스터마이징이 놀랍도록 간단해집니다.

토큰 카테고리

시맨틱 컬러

타입 스케일

Figma 동기화

Colors

브랜드 컬러부터 UI 용도별 컬러까지

서체, 사이즈, 굵기 조합

요소 간 여백과 레이아웃 간격

UI 레이어의 깊이와 입체감 표현

모서리 곡률로 부드러운 인상 조절

테두리 굵기로 강조 수준 제어

화면 크기에 따른 레이아웃 전환

요소 겹침 순서 관리

투명도로 시각적 계층 표현

용도별로 최적화된 6단계 사이즈

애니메이션 속도 통일

움직임의 가속, 감속 커브

누름과 애니메이션의 확대, 축소 효과

UI 요소의 등장과 상태 전환 모션

모든 디자인 토큰은figma-tokens.json을 기준으로 관리됩니다.npx sync-tokens를 실행하면 모든 배포 파일이 자동으로 생성됩니다.

figma-tokens.json → CSS · JS · TS · Tailwind v3/v4 · JSON