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

핵심 내용

• Figma의 디자인 토큰을 Tokens Studio와 token-transformer, GitHub Actions로 자동 변환·PR 생성하는 프로세스 소개
• Vue SPA에서 Next.js SSR, Monorepo, Panda CSS 기반 디자인 시스템으로 전환하며 토큰 자동화 필요성 정리
• Primitive/semantic 토큰을 분리 관리하고, 변환된 JSON을 Panda CSS가 해석 가능한 구조로 다시 매핑하는 흐름 설명

구조와 흐름

• Figma에서 토큰 정의 후 JSON Export, Git 브랜치로 push
• GitHub Actions에서 token-transformer로 dark/light/primitive/typography 토큰 분리 변환
• Panda CSS 토큰 카테고리에 맞게 재구성해 서비스와 디자인 시스템에서 재사용

선택 이유

• 디자인 변경 시 수동 반영으로 생기던 사이드이펙트 완화
• 디자이너 수정 내용을 개발자가 직접 다시 입력하지 않아도 되도록 자동화
• Zero Runtime CSS-in-JS와 토큰 자동화의 궁합을 고려한 선택

적용해볼 점

• 디자인 토큰을 primitive와 semantic으로 나눠 관리하는 방식 검토
• GitHub Action으로 토큰 변환과 PR 생성까지 이어지는 자동화 파이프라인 구성
• 사용하는 CSS-in-JS 도구가 지원하는 토큰 형태로 별도 변환 계층 마련