React ExportはFramerで視覚的にデザインしたUIをプロダクション用Reactコードに即座にエクスポートできるプラグインです。 unframer CLIを使用して、Framerで選択したコンポーネントを型指定されたReactコンポーネントに変換し、Next.jsやRemixなどのReactフレームワークで簡単に使用できます。

主要機能

• 完全な型安全性の提供: エクスポートされたコンポーネントは.d.ts型定義ファイルと共に提供され、コードの自動補完とビルドエラーの防止が可能です。

• 自動生成されるPropsインターフェース: Framerで設定した変数やデザイントークンがReact propsに自動マッピングされ、コードの記述がはるかに簡単になります。

• レスポンシブブレイクポイントのサポート: Framerで設定したレスポンシブ属性がそのままReactコンポーネントに反映され、さまざまな解像度で動作します。

• 汎用フレームワーク互換性: Next.js、RemixなどのさまざまなReactベースのプロジェクトで制限なく使用可能です。

使用方法

1. ヘッダー、ヒーローセクション、ボタンなどのUIをFramerでデザインします。

2. Reactコードに変換するコンポーネントを選択します。

3. unframer CLIで選択したコンポーネントをReactコードとしてエクスポートします。TypeScript定義ファイルが一緒に提供されます。

4. 変換されたコンポーネントをプロジェクトに取り込み、onClickやテキスト変更、リンク設定などのpropsを活用してカスタマイズできます。

動作方式

このプラグインはFramerのコンポーネントをJavaScriptファイルとしてエクスポートします。この際、以下の機能が全てサポートされます。

• SSR（サーバーサイドレンダリング）

• Framer変数（variable）

• fetch及びform機能

• カラー・スタイルとダークモードなどのデザイン設定

unframer CLIを使ってFramerコンポーネントをダウンロードすると、JavaScript形式のコードとともにTypeScript定義ファイルがエクスポートされます。これらのファイルは機械的に生成されたコードのため手動で修正できず、代わりにFramerで設定した変数（variables）を通じてカスタマイズする必要があります。

注意事項

利用にはReact開発の知識が必要であり、有料プランの購読が必要です。

• 個人プラン: $50/月

• ビジネスプラン: $250/月

• オープンソース/非営利機関には割引が可能（要問い合わせ）

• 最初の7日は無料体験が提供されます。