Framer to React Exporterは、Framerの直感的なデザイン環境とプロダクション用Reactコードベースをつなぐ強力なプラグインです。Framerインターフェースでコンポーネントを選択した後、unframer CLIを実行すると、すぐに完全なタイプセーフのReactコンポーネントが生成されます。Next.jsやRemixを含むさまざまな最新のReactフレームワークにすぐに統合できます。

注意: 使用前にReactの開発知識が必要です。

主要機能

• 完全なタイプセーフティ: エクスポートされたすべてのコンポーネントは.d.ts TypeScript定義ファイルを含み、IDEでのコード補完とビルドタイムエラー検出が可能です

• 自動補完Propsと変数サポート: Framerの変数とデザイントークンがReact Propsにマッピングされ、インテリセンスとスマートな自動補完を提供します

• レスポンシブブレークポイントサポート: Framerで設定したレスポンシブ動作がそのままReactコンポーネントに変換されます

• 多様なフレームワークとの互換性: Next.js、Remixなどの任意のReact基盤環境で最小限の設定で使用可能です

使用方法

1. Framerでデザインを作成: ヘッダー、フッター、バナー、Heroセクションなど、希望するUIを制作します

2. エクスポートするコンポーネントを選択: 全セクションまたは特定のUI要素を指定します

3. unframer CLIを実行: Reactファイルと.d.tsファイルが一緒にダウンロードされ、タイプチェックとスムーズな開発体験を保証します

4. プロジェクトに統合: Reactプロジェクトに取り込み、スタイル調整、SSRの設定、イベントハンドラー（例えばonClickなど）を追加できます

静的エクスポート以上の機能

このプラグインは単に静的なコンポーネントをエクスポートするだけでなく、タイプセーフティ、SSRサポート、カスタムイベントバインディングまで提供し、Framerで作成したインタラクティブなUIをそのままプロダクション環境に適用できます。

動作方式

FramerコンポーネントをJavaScriptファイルとしてエクスポートし、SSRと変数、fetch、フォーム、色スタイル、ダークモードなどのFramer機能をサポートします。ファイルはunframer CLIでダウンロードし、コードベースにインポート・レンダリングできます。
これらのファイルは機械的に生成されるため直接修正はできず、代わりにFramer変数を活用してテキスト変更、ボタンリンク更新、イベントハンドラの接続などをReact Propsで制御する必要があります。

React Exportを活用すると、新たにコンポーネントをコーディングすることなく、Framerの最新のデザインツールで作られた成果物をメンテナンス可能なタイプセーフなReactコードとしてすぐに取り込むことができます。