Engineering - 라포랩스 팀블로그 · 2025. 02. 24.
"딸깍"이면 끝! 피그마에서 바로 리액트 컴포넌트로 변환하기
AI 엔지니어링 브리핑
피그마 디자인을 회사의 리액트 개발 방식에 맞는 코드로 자동 변환하는 플러그인을 만들어 반복 작업을 줄이고 개발 생산성을 높인 이야기입니다.
문제 & 배경
문제 & 배경: 디자이너가 만든 피그마의 색상, variant, 속성 등을 프론트엔드 엔지니어가 매번 직접 코드로 옮겨야 해서 시간이 오래 걸리고 실수가 생길 여지가 있었습니다.
기술 & 해결책
기술 & 해결책: Figma codegen 플러그인이 선택된 디자인 요소를 읽어 컴포넌트 이름과 속성을 리액트 코드로 바꾸고, 중첩된 요소는 ReactNode라는 중간 구조를 거쳐 VStack·HStack·Text·Box 같은 컴포넌트와 JSX로 재구성하도록 만들었습니다.
교훈 & 주의점
교훈 & 주의점: 회사의 디자인 시스템과 이름 규칙까지 반영하려면 직접 만든 도구가 유리하며, 피그마 컴포넌트와 리액트 컴포넌트의 이름·속성 규칙을 통일해야 협업과 코드 변환이 더 편해집니다.
함께 읽을 글
내용이 비슷해요내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.