프론트엔드
피그마 플러그인을 통한 개발 생산성 끌어올리기
두줄요약
피그마 플러그인으로 디자인 토큰과 Tailwind 클래스를 자동 추출해 개발 생산성을 높인 사례를 소개했습니다. 디자인 시스템의 일관성과 지속적인 도구 개선의 중요성도 함께 강조했습니다.
핵심 내용
- styled-components의 런타임 오버헤드와 생산성 문제를 고려해 tailwindcss 전환을 결정
- 디자인 토큰과 네이밍 컨벤션을 바탕으로 피그마 플러그인을 만들어 Tailwind 클래스와 디자인 시스템 컴포넌트를 자동 추출
- 피그마 API, 정규식, 노드 속성 조회를 활용해 텍스트, 레이아웃, 색상, 패딩, 그림자, 테두리 등을 클래스명으로 변환
- 클래스명만 복사하는 탭을 추가해 UI 컴포넌트 개발 속도와 사용성을 개선
적용해볼 점
- 디자인 시스템의 일관된 토큰과 네이밍이 자동화 도구의 핵심 기반이라는 점
- 반복적인 스타일 변환 작업은 플러그인이나 코드 생성으로 줄일 수 있다는 점
- 도구는 디자인 시스템 변경과 엣지 케이스 대응을 위해 지속적으로 고도화가 필요하다는 점