피드로 돌아가기
Dev.toFrontend
원문 읽기
Figma to GitHub 자동화 파이프라인 구축을 통한 Design Token 동기화 오류 제로화
Building a Figma to GitHub token pipeline that actually works
AI 요약
Context
디자인 시스템 변경 사항을 수동 JSON 전달이나 로컬 스크립트로 관리하며 발생한 버전 불일치 및 커뮤니케이션 누락 문제 분석. Single Source of Truth 부재로 인한 프로덕션 환경의 시각적 회귀 버그 발생 가능성 확인.
Technical Solution
- W3C Design Tokens 표준 규격 채택을 통한 디자인-개발 간 데이터 교환 인터페이스 표준화
- Octokit 라이브러리를 활용하여 Figma 변수 변경 시 GitHub Branch 생성 및 Pull Request를 자동 생성하는 Git-flow 기반 파이프라인 설계
- Style Dictionary를 통한 Raw JSON의 CSS Variable 변환 및 플랫폼별 최적화 빌드 프로세스 구축
- GitHub Actions를 활용하여 PR 생성 시점에 컴파일된 CSS를 자동으로 커밋하는 CI 자동화 루프 구현
- Kebab-case 변환 Custom Transformer 도입을 통한 디자인-코드 간 네이밍 컨벤션 불일치 해결
- Light/Dark Mode 분리 및 미디어 쿼리 래핑을 통한 테마별 CSS 파일 생성 로직 구현
실천 포인트
- 디자인-개발 협업 시 W3C Design Tokens와 같은 표준 포맷 도입 검토 - 수동 전달 방식 대신 Pull Request 기반의 변경 사항 리뷰 프로세스 강제 적용 - Style Dictionary와 같은 전처리 도구를 활용하여 디자인 값의 코드 변환 자동화 - 디자인 툴의 자유로운 네이밍을 코드 제약 사항으로 변환하는 Transformer 단계 추가