30개 이상의 앱에 일관성을 부여하는 Design Token 파이프라인 구축

Design Tokens at Scale: Keeping Design Consistent Across 30+ Production Apps

Ujjawal Tyagi2026년 4월 24일2분intermediate

AI 요약

Context

디자이너의 빠른 반복 주기와 엔지니어의 안정적인 계약 구조 사이의 간극으로 인한 프로덕션 오류 발생. 하드코딩된 값으로 인한 브랜드 제어력 상실 및 플랫폼별 디자인 파편화 문제 해결 필요.

Technical Solution

Figma Variables 기반의 Semantic Naming 체계를 도입하여 리터럴 값 사용을 배제한 단일 진실 공급원(Single Source of Truth) 확보
Tokens Studio 플러그인을 통한 JSON 추출 및 전용 Git Monorepo 관리로 디자인 버전 제어 구현
Style Dictionary를 활용하여 JSON 데이터를 Flutter, Next.js, iOS, Android 등 플랫폼별 최적화된 리소스로 자동 변환하는 컴파일 단계 구축
Private npm registry와 Dependabot을 연동한 패키지 배포 방식으로 앱별 의존성 업데이트 자동화
토큰 폭발 방지를 위해 Component-level 토큰 대신 Primitive-level 토큰 기반의 코드 조합 방식 채택
타이포그래피 복잡도 해결을 위해 폰트 패밀리를 3종으로 제한하고 Weight와 Size를 프리미티브 단위로 조합하는 설계 적용

실천 포인트

- 디자인 토큰 정의 시 #hex 값 대신 semantic name(예: color/primary/500)을 사용하고 있는가 - 플랫폼별 수동 변환 없이 Style Dictionary와 같은 자동화 도구를 통해 리소스를 생성하는가 - 컴포넌트 단위의 토큰 생성으로 인한 관리 포인트 증가를 막기 위해 Primitive 토큰 조합 방식을 사용하는가 - 디자인 변경 사항이 Git 버전 관리 및 패키지 매니저를 통해 안전하게 배포되는 파이프라인을 갖추었는가

태그

#Style Dictionary #Cross-platform #Monorepo #Figma Variables #Design Tokens

원문 읽기