디자인 시스템 중 디자인 토큰을 여러 도구를 이용하여 자동화 하는 방법

Context

디자인 변경이 발생할 때마다 수동으로 모든 관련 영역을 찾아 스타일을 일일이 적용해야 했고, 이 과정에서 누락이나 불일치로 인한 사이드이펙트가 항상 발생했다. NextJs 신규 마이그레이션 과정에서 이를 자동화할 필요성이 대두되었다.

Technical Solution

• Figma에서 Tokens Studio For Figma 플러그인으로 디자인 토큰을 Primitive Tokens(기본값)과 Semantic Tokens(의미 기반 추상화)로 분류하고 JSON으로 export해 design-system 브랜치에 자동 push
• GitHub Action 워크플로우: design-system 브랜치의 tokens.json 파일 push 감지 → token-transformer로 dark/light 테마별 JSON 파일과 typography 파일로 변환 → 변환된 파일을 포함한 PR 자동 생성
• Panda CSS(Zero Runtime CSS-IN-JS)를 활용해 변환된 토큰을 TypeScript 타입으로 정의하고, 생성된 타입이 css() 함수의 인자에서 타입 안정성 제공
• Monorepo 구조(Yarn workspace)의 packages/{package-name} 경로에 디자인 시스템 패키지를 배치하고, 서비스 애플리케이션에서 재사용 가능하도록 구성
• Storybook으로 토큰화된 컴포넌트를 시각적으로 검증 가능한 환경 제공

Key Takeaway

디자인-개발 협업 프로세스를 자동화할 때는 Figma 플러그인 → JSON export → CI/CD 파이프라인 → 타입화된 코드 생성의 단계별 연결이 중요하며, 특히 Token Transformer와 같은 변환 도구를 통해 단일 JSON 소스에서 여러 포맷(다크/라이트 테마, 다양한 기술 스택)의 토큰을 자동 생성할 수 있다.