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