実行可能なユーザー：すべてのユーザー
該当プラン：Business、Enterprise（Accelerate ライセンス）
対応プラットフォーム：ブラウザー、デスクトップ
Reforge Build のユーザーは、プロトタイプを .zip ファイルとして React プロジェクトでエクスポートできます。Miro では、Reforge Build のプロトタイプを 編集可能な Miro Prototypes に変換することもできます。
Reforge Build からプロトタイプをエクスポートする
Reforge Build のプロトタイプをエクスポートするには、プロトタイプを .zip ファイルとしてダウンロードできます。ファイルには Tailwind CSS を含む完全な React プロジェクトが含まれます。任意の IDE でファイルを開くことができます。
以下の手順に従ってください：
- Reforge Build でプロトタイプを開きます。
- プレビュー パネルの上で、
<>をクリックして コードモード を開きます。 - 右側で下矢印をクリックして コードを ZIP としてダウンロード します。
.zipファイルがダウンロードされます。すべてのプロトタイプのコンポーネント、ルート、スタイルが保持されます。
Reforge Build から Miro に編集可能なプロトタイプをインポートする
Reforge Build から Miro にプロトタイプを取り込むには、プロトタイプのスクリーンショットを撮って Miro のキャンバスに貼り付けます。貼り付けたスクリーンショットを Miro で編集可能なプロトタイプに変換できます。
Reforge Build で
- プロトタイプを開きます。
- 右側で、新しいタブで開くをクリックします。
プロトタイプのプレビューが別のブラウザタブで開きます。Reforge Build では、プロトタイプのプレビューを新しいタブで開くことができます。
- プロトタイプのスクリーンショットを撮ります。任意のスクリーンショットツール、開発者ツール、またはキーボードショートカットを使用します。
-
スクリーンショットをクリップボードにコピーします。あるいは、スクリーンショットを画像ファイルとしてデスクトップに保存します。
ヒント：Reforge Build のプロトタイプがスクロールする場合は、プロトタイプ全体が表示されるまでズームアウトしてからスクリーンショットを撮ってください。ズームは Miro での変換に影響しません。
Miro で
- Miro のボードで、スクリーンショットを貼り付けるか、保存した画像ファイルをキャンバスにドラッグします。
- 取り込んだ画像をクリックして選択します。
コンテキストメニューが表示されます。 - 変換をクリックし、プロトタイプを選択します。
サイドキックスパネルが開き、スクリーンショットを編集可能なプロトタイプに変換します。Miroでは、スクリーンショットを編集可能なプロトタイプに変換できます。
- （任意）引き続きサイドキックに指示して、プロトタイプを反復的に改善してください。
-
キャンバスに追加をクリックします。
これで Reforge Build のプロトタイプが Miro 上で編集可能なプロトタイプになります。
詳細： Miro Prototypesをご覧ください。