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

이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.

디플롯 서비스의 디자인 시스템 자동화

디플롯은 Vue v2.x로 개발된 SPA에서 NextJs로 마이그레이션 중이며, 디자인 시스템을 통한 디자인 토큰 자동화 프로세스를 도입하고 있다.

디자인 변경 시 발생하는 오류를 줄이기 위해 Figma에서의 디자인 토큰 업데이트가 Github PR로 자동 생성되는 시스템을 구축하였다.

디자인 토큰은 Primitive Tokens과 Semantic Tokens으로 구분되며, Figma의 Tokens Studio 플러그인을 통해 관리된다.

디자인 토큰을 JSON 형식으로 변환한 후, Github Action을 통해 자동으로 PR이 생성되며, Panda CSS와의 통합을 통해 최종적인 디자인 시스템을 완성한다.

이러한 자동화는 디자인 업데이트의 효율성을 높이고, 개발자가 수동으로 스타일을 수정할 필요를 줄인다.