피그마 디자인을 코드로! 개발 속도 80% UP!
by DD
9개월 전
조회수 7
피그마 디자인을 코드로 변환하는 플러그인 제작 배경 설명
Codegen Plugin API를 활용하여 Dev Mode에서 코드 자동 생성
플러그인 도입 후 UI 개발 속도 80% 향상 및 단순 실수 감소
Codegen Plugin API의 핵심 원리
Codegen Plugin API는 Dev Mode에서 선택된 노드의 정보를 읽어 Inspect 패널에 코드를 표시한다. 따라서 별도 플러그인 실행 없이 노드 클릭만으로 코드 확인이 가능하다. 구체적으로 `codegen.on("generate")` 핸들러를 통해 JSX 코드를 생성한다.
Rule-Based 매핑 구현 방식
플러그인은 AI 기반 매핑 대신 Rule-Based 방식으로 디자인 시스템 규칙을 코드화했다. TextNode는 Typography로, InstanceNode는 SvgIcon, Button 등으로 변환한다. 반면 FrameNode/ComponentNode는 Auto Layout 여부에 따라 분기하여 JSX를 생성한다.
플러그인 도입 후 얻은 효과
플러그인 도입으로 Typography 컴포넌트 구현 시간이 30초에서 5초 미만으로 단축되었다. 따라서 UI 개발 속도 80% 향상 및 QA 단계 실수 감소를 달성했다. 결과적으로 신규 팀원의 디자인 시스템 적응을 돕고, 개발 생산성을 높였다.
