프론트엔드
"딸깍"이면 끝! 피그마에서 바로 리액트 컴포넌트로 변환하기
두줄요약
피그마 디자인을 React 컴포넌트로 바로 변환하는 플러그인 구현 과정을 소개했습니다. 사내 규칙을 반영한 자동화로 수작업을 줄이고 생산성을 높인 사례입니다.
핵심 내용
- 피그마 플러그인 codegen-plugin으로 디자인 요소를 React 컴포넌트 JSX로 변환하는 흐름 소개
- 컴포넌트 이름과 variant/property를 prop으로 매핑하고, boolean prop 처리 등 JSX 관습을 반영
- 중첩 구조 처리를 위해 ReactNode 중간 표현과 AST 유사한 2단계 변환 도입
- TEXT, RECTANGLE, GROUP 등 다양한 노드 타입으로 확장하고 사내 네이밍 규칙까지 통합
적용해볼 점
- 디자인 시스템 규칙을 코드젠에 반영해 수작업 입력과 이름 변환 비용 감소
- 사내 워크플로우에 맞는 전용 플러그인 구축으로 생산성 개선
- Org/Enterprise 플랜에서는 private plugin 배포로 팀 공유 효율화