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

간단 소개

피그마, Panda CSS, Github Action을 활용한 디자인 토큰 자동화로 개발 효율성을 향상시키고 DX 개선을 목표로 합니다.

AI Summary

디자인 토큰 자동화 개요
- 올리브영 디플롯 서비스의 프론트엔드 개발팀은 디자인 시스템의 디자인 토큰을 자동화하여 디자인 변경 시 사이드 이펙트를 줄이고 개발 효율성을 높이고자 했습니다.
- 피그마(Figma), Panda CSS, Github Action을 활용하여 디자인 토큰 변경 사항이 자동으로 Github PR로 생성되도록 구축했습니다.
자동화 프로세스 상세
- 디자인 담당자는 피그마에서 디자인 토큰을 정의하고 Tokens Studio 플러그인을 통해 JSON 파일로 Export 후 Git에 Push합니다.
- Github Action은 해당 Push를 감지하여 Token Transformer를 통해 다양한 타입의 토큰으로 변환하고, Panda CSS에서 사용할 수 있는 형태로 가공합니다.
- Panda CSS 설정 파일에 토큰을 추가하여 개발 시 스타일 정의에 활용합니다.
결과 및 개선점
- 자동화된 시스템을 통해 디자인 변경 사항이 코드에 자동으로 반영되어 개발 효율성이 향상되었습니다.
- 타입스크립트 타입 정의 미비 및 자동 완성 부재와 같은 DX(개발자 경험) 개선 필요성을 확인하고, 지속적인 리팩토링을 통해 개선할 계획입니다.