React Export는 프레이머에서 시각적으로 디자인한 UI를 프로덕션용 React 코드로 바로 내보낼 수 있는 플러그인입니다.

unframer CLI를 통해 프레이머에서 선택한 컴포넌트를 타입이 지정된 React 컴포넌트로 변환하여, Next.js, Remix 등 어떤 React 프레임워크에서도 쉽게 사용할 수 있습니다.

주요 기능

• 완전한 타입 안전성 제공: 내보낸 컴포넌트는 .d.ts 타입 정의 파일과 함께 제공되어, 코드 자동 완성과 빌드 오류 방지가 가능합니다.

• 자동으로 생성되는 Props 인터페이스: 프레이머에서 설정한 변수와 디자인 토큰이 React props로 자동 매핑되어 코드 작성이 훨씬 수월해집니다.

• 반응형 브레이크포인트 지원: 프레이머에서 설정한 반응형 속성이 그대로 React 컴포넌트에 반영되어 다양한 해상도에서 동작합니다.

• 범용 프레임워크 호환성: Next.js, Remix 등 다양한 React 기반 프로젝트에 제한 없이 사용 가능합니다.

사용 방법

1. 헤더, 히어로 섹션, 버튼 등 원하는 UI를 프레이머에서 디자인합니다.

2. React 코드로 변환할 컴포넌트를 선택합니다.

3. unframer CLI를 통해 선택한 컴포넌트를 React 코드로 내보냅니다. 타입스크립트 정의 파일이 함께 제공됩니다.

4. 변환된 컴포넌트를 프로젝트에 가져와 onClick, 텍스트 변경, 링크 설정 등 props를 활용해 커스터마이징할 수 있습니다.

작동 방식

이 플러그인은 프레이머의 컴포넌트를 JavaScript 파일로 내보냅니다. 이때 다음과 같은 기능들이 모두 지원됩니다.

• SSR(서버 사이드 렌더링)

• 프레이머 변수(variable)

• fetch 및 form 기능

• 색상 스타일과 다크 모드 등 디자인 설정

unframer CLI를 사용해 프레이머 컴포넌트를 다운로드하면, JavaScript 형식의 코드와 함께 타입스크립트 정의 파일이 포함되어 내보내집니다. 이 파일들은 기계적으로 생성된 코드이기 때문에 수동으로 수정할 수는 없으며, 대신 프레이머에서 설정한 변수(variables)를 통해 커스터마이징해야 합니다.

주의사항

사용을 위해 React 개발 지식이 필요하며, 유료 플랜을 구독해야 합니다.

• 개인 플랜: $50/월

• 비즈니스 플랜: $250/월

• 오픈소스/비영리 기관은 할인 가능 (문의 필요)

• 최초 7일은 무료 체험이 제공됩니다.