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