디자인 토큰 자동화로 개발 생산성 UP!
by DD
1년 전
조회수 5
Figma 기반 디자인 시스템의 디자인 토큰을 Github Actions로 자동화
Tokens Studio for Figma 플러그인과 Token Transformer 활용
Panda CSS를 사용하여 자동 완성 부재 문제 해결 시도
Figma 디자인 토큰을 Github Actions로 변환하는 과정
디자인 시스템의 디자인 토큰을 Figma에서 정의하고, Tokens Studio for Figma 플러그인을 통해 JSON으로 Export한다. Github Actions는 디자인 토큰 변경을 감지하여 Token Transformer를 실행, Panda CSS에서 사용할 수 있는 형태로 변환한다. 따라서, 디자인 변경 사항을 자동화된 프로세스로 코드에 반영한다.
Panda CSS를 활용한 디자인 토큰 자동화의 장단점
Panda CSS를 사용하면 디자인 토큰을 활용하여 스타일 관리를 효율적으로 할 수 있다. 자동 완성 부재는 단점이지만, 내부적으로 타입 정의를 개선하여 해결하려 노력한다. 자동화된 디자인 토큰 관리는 개발 생산성을 향상시키지만, 초기 설정 및 유지보수에는 노력이 필요하다.
디자인 시스템 자동화, 실전 적용 가이드
디자인 시스템을 구축하고 있다면, Figma와 Github Actions를 연동하여 디자인 토큰 자동화를 시도해 볼 수 있다. Token Transformer를 사용하여 토큰을 변환하고, Panda CSS와 같은 CSS-in-JS 라이브러리를 활용하여 스타일을 적용한다. 타입 정의를 명확히 하여 개발자 경험을 개선하는 것이 중요하다.
