팀 개발 속도 높이기: 피그마 컴포넌트 코드 자동 변환 플러그인 제작기

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

• 플러그인 제작 배경 및 목표
  • 디자인 시스템을 코드로 옮기는 과정에서 발생하는 반복적인 수작업과 그로 인한 시간 낭비를 해결하기 위해 플러그인 개발을 시작했습니다.
  • 기존 플러그인 및 Figma Code Connect의 한계를 극복하고, 팀 규칙에 최적화된 코드 자동 생성을 목표로 했습니다.
  • 개발 워크플로우를 방해하지 않도록 Dev Mode에서 자연스럽게 실행되는 것을 중요하게 생각했습니다.
• 플러그인 구현 및 작동 방식
  • Figma Codegen Plugin API를 활용하여 선택된 노드의 정보를 기반으로 코드 스니펫을 생성합니다.
  • Rule-Based 매핑 방식을 통해 노드 타입에 따라 컴포넌트를 매핑하고, 디자인 시스템 규칙을 코드화했습니다.
  • TextNode는 Typography 컴포넌트로, InstanceNode는 SvgIcon, Button 등으로 변환하며, FrameNode와 ComponentNode는 auto layout 여부에 따라 Stack 또는 Block으로 변환합니다.
  • 재귀 호출을 통해 트리 전체를 변환하고, 코드 가독성을 높이기 위해 들여쓰기 및 불필요한 문자열 필터링을 적용했습니다.
• 플러그인 도입 효과 및 결론
  • Typography 컴포넌트 작성 시간 단축, 페이지 단위 개발 시간 절약, QA 단계에서의 오류 감소 등 UI 개발 속도가 약 80% 향상되었습니다.
  • 신규 팀원의 디자인 시스템 학습에 도움을 주었으며, 팀원들의 긍정적인 반응을 얻었습니다.
  • 자동화는 개발자가 본질적인 문제 해결에 집중할 수 있는 환경을 만드는 데 기여합니다.