팀 개발 속도 향상을 위한 피그마 컴포넌트 코드 자동 변환 플러그인 제작기

이 게시물은 여기어때컴퍼니 파트너웹개발팀이 피그마 디자인 요소를 팀 규칙에 맞는 코드로 자동 변환하는 플러그인을 개발한 과정을 소개합니다.

개발 배경과 문제점

• 디자인 시스템이 있어도 수작업이 많아 개발 속도가 느리고 실수 발생
• 기존 플러그인과 기능은 팀 규칙 반영에 한계가 있었음

플러그인 구현과 특징

• Figma Codegen Plugin API를 활용해 Dev Mode에서 바로 코드 스니펫 생성
• 룰 베이스 매핑으로 Typography, InstanceNode, FrameNode 등 노드별 규칙 적용
• 재귀적 트리 변환으로 JSX 코드 생성 자동화
• 가독성 높은 코드 생성 및 스타일 누락, 오타 감소

도입 효과

• UI 개발 속도 약 80% 향상
• QA 단계 오류 감소 및 신규 팀원 학습 용이
• 팀원 반응 긍정적이며 지속 개선 계획