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

이 글은 올리브영 디플롯 서비스 개발팀에서 디자인 시스템의 디자인 토큰을 여러 도구를 활용하여 자동화하는 과정을 다룹니다. Figma에서 디자인 토큰을 관리하고, Panda CSS를 통해 이를 코드로 변환하며, Github Action을 사용하여 전체 프로세스를 자동화하는 방법을 상세히 설명합니다.

디자인 시스템 구축 및 유지보수의 효율성을 높이고, 디자인과 개발 간의 일관성을 유지하는 데 중점을 둡니다. 자동화된 워크플로우를 통해 반복적인 작업을 줄이고, 더 나은 사용자 경험을 제공하기 위한 실질적인 적용 사례와 결과를 공유합니다.