핵심 요약
여기어때는 피그마 Dev Mode 전용 코드생성 플러그인을 도입해 디자인 요소를 클릭하면 팀 규칙에 맞는 JSX 코드가 자동으로 생성되도록 했고, Typography 구현 시간을 30초에서 5초 미만으로 단축하며 UI 개발 속도를 약 80% 향상시켰다.
구현 방법
- Codegen Plugin API를 Dev Mode 전용으로 활용해 노드 정보를 Inspect 패널에 코드 스니펫으로 표시하는 흐름 구성
- 선택 노드 → generate 이벤트 수신 → generateNodeCode로 규칙 기반 매핑 후 JSX를 반환하는 실행 흐름 구현
- TextNode/InstanceNode/FrameNode/ComponentNode에 대한 규칙 기반 매핑과 재귀 처리로 컴포넌트 구조 생성, Mixed Style 및 버튼 내부 텍스트 처리 등 세부 로직 반영
주요 결과
- Typography 구현 시간 30초에서 5초 미만으로 단축
- UI 개발 속도 약 80% 향상 및 디자인 시스템 규칙의 일관성 증가
- 신규 팀원 온보딩 속도 향상으로 초반 적응 시간 단축
