프론트엔드
팀 개발 속도 높이기: 피그마 컴포넌트 코드 자동 변환 플러그인 제작기
두줄요약
Figma Dev Mode의 Codegen Plugin API로 디자인 요소를 팀 규칙에 맞는 코드로 자동 변환하는 플러그인을 제작했습니다. 이를 통해 UI 작성 시간을 크게 줄이고 실수도 감소시켰습니다.
문제 상황
- 디자인 시스템이 있어도 Figma 스타일 확인, 컴포넌트 규칙 반영, 코드 입력을 반복해야 하는 수작업 부담
- 기존 플러그인과 Code Connect는 팀 고유 규칙과 네이밍 차이로 바로 쓰기 어려운 상태
원인 분석
- 디자인 속성과 실제 코드 구조 간 매핑 규칙을 자동화하지 못한 점
- 일반 플러그인 방식은 실행 과정이 번거롭고 개발 워크플로우를 끊는 점
해결 방법
- Figma Dev Mode의 Codegen Plugin API를 사용해 선택 노드의 코드를 Inspect 패널에 바로 생성
- 노드 타입별 rule-based 매핑과 재귀 변환으로 TextNode, InstanceNode, FrameNode를 JSX로 변환
- Typography variant 추출, Icon/Button 패턴 인식, auto layout 속성 반영, 들여쓰기 정리로 즉시 사용 가능한 코드 생성
성능/운영 포인트
- Typography 작성 시간 30초에서 5초 미만으로 단축
- 페이지 단위 작업 시간 절감, QA 단계 스타일 누락과 오타 감소
- 신규 팀원의 디자인 시스템 학습 속도 향상