プロトタイプを再生

はじめに

この機能を使用できるユーザー

プロトタイプは あらゆるチームまたはプランのユーザーが再生できます

ファイルまたはプロトタイプへの閲覧のみのアクセス権のある任意のユーザーがプロトタイプを再生できます。プレゼンテーションビューの表示オプションは誰でも調整できます。

プロトタイプでデザインの操作方法を再現できるため、開発に移行する前にデザインの動作を確認してテストすることができます。キャンバスに直接構築したプロトタイプを再生して、プロトタイプの操作やアニメーションの動作を確認できます。

プロトタイプを再生する前に、プロトタイプがデザインどおりに再生されるようにデザインを準備します。

次に、次の中からプロトタイプの再生方法を選択します。

• プレビュー: インラインプレビューで、プロトタイプをエディターで直接再生します。プレビューを使用すると、同じタブを使って構築したプロトタイプの動作を確認できます。
• プレゼンテーション: プロトタイプを別のタブにプレゼンテーションビューで再生します。プレゼンテーションを使用すると、プロトタイプを他のユーザーと共有したり、特定のデバイス上での見え方を確認したりすることができます。

プロトタイプの再生の準備

キャンバスでのフレームとコネクションのセットアップによって、プロトタイプの再生のされ方は次のように変わります。

• プレビューまたはプレゼンテーションを行うためには、デザインがフレーム内に存在している必要があります。
• プロトタイピングコネクションがある場合は、プロトタイプの再生時にコネクションのあるフレームのみが再生されます。それぞれの画面をクリックしたり、任意のホットスポットで操作したりできます。
• プロトタイピングコネクションがない場合は、現在のページからフレーム内を移動できます。
• フローの開始点をセットアップして、プロセスの開始点を指定することができます。複数のフローの開始点を指定することができます。
• プレゼンテーションビューの場合は、プロトタイプ設定でプロトタイプのデバイスタイプ、開始点、背景の色を設定します。

プロトタイプを再生する準備ができたら、プレビューまたは プレゼンテーションを選択します。

プロトタイプのプレビュー

インラインプレビューを使用すると、デザインと並行してキャンバスに直接プロトタイプを再生できます。インラインプレビューでは、あらゆるデザインの変更が直ちにプレビューに反映されます。

インラインプレビューを開くには、一番上にあるツールバーで プレビューをクリックします。

フローの開始点にあるプレビューアイコンをクリックして、インラインプレビューを開くこともできます。

キーボードのShift Spaceを使うこともできます。

スマートフォンやタブレットなど、実物感のあるコンテナにプレビューを配置するには、プロトタイプ設定のデバイスタイプを設定します。

インラインプレビューの使用方法

インラインプレビューで次の操作を行えます。

1. プロトタイプを再開: キャンバスで最後に選択したフレームからプロトタイプを再開します。Rを押しても再開できます。
2. オーバーフローメニュー:
   1. 実際のサイズ(100%)に変更: プロトタイプデバイスがページに置かれている場合は、インラインプレビューのサイズをデバイスフレームのサイズに合わせて調整します。デバイスフレームが設定されていない場合は、選択したフレームのサイズに合わせてインラインプレビューを調整します。
   2. アスペクト比に合わせてサイズを変更: プロトタイプデバイスがページに置かれていない場合、現在のフレームのアスペクト比に合わせてインラインプレビューのサイズを調整します。
   3. アクティブなフレームをフォロー: 有効にすると、キャンバスの選択したフレームの更新がインラインプレビューの現在のフレームにミラーリングされます。プレビューのプロトタイプ内を移動すると、キャンバスと位置も移動します。
3. プレゼンテーションプレビューで開く: プレゼンテーションビューでプロトタイプを開きます。
4. インラインプレビューを閉じます。

インラインプレビューでは、次の操作が行えます。

• サイズ変更: インラインプレビューの端をクリックしてドラッグすると、サイズを変更できます。シフトを押すと拡大縮小できます。
• キャンバスでフレームを選択: キャンバスで別のフレームをクリックすると、そのフレームのプレビューに飛ぶことができます。

プロトタイプのプレゼンテーション

プレゼンテーションビューを使用すると、新しいタブでプロトタイプを再生できます。

プレゼンテーションビューでプロトタイプを開くには、ツールバーで [プレゼンテーション]をクリックするか、キーボードで次のショートカットを使用します。

• Mac:⌘ Command⌥ Optionreturn
• Windows: ControlAltenter

プレゼンテーションビューのレイアウト

プレゼンテーションビューでは、次の操作が行えます。

1. をクリックすると、左のサイドバーを表示したり非表示にしたりすることができます
2. をクリックすると、コメントモードになりプロトタイプにコメントを追加できます
3. フローの表示と選択
4. フローの説明の表示
5. プロトタイプビューのオプションの設定
6. をクリックすると、全画面モードになります
7. Figmaでは選択した背景色でデバイスに表示できます
8. 選択したデバイスをプロトタイプの設定に表示します
9. カーソルまたはタッチインジケーター(モバイルデバイスのプロトタイプのみ)を表示します
10. ホットスポットで操作するか、プロトタイプ内でキーボードのショートカットを入力します
11. とを使用して画面間を移動できます。キーボードの矢印キーを使用することもできます。
12. [再開]ボタンまたはRを押すと、現在のフローの開始点に戻ります。フローがない場合は、キャンバスの最初のフレームに戻ります。

プレゼンテーションビューのオプション

オプションメニューで、次の設定のオン/オフを切り替えることができます。

フレームの順序付けと移動

プロトタイプの再生時に、→、Space、またはNを押すと次のフレームに移動でき、←を押すと前のフレームに戻れます。この設定はデフォルトで有効になっています。

次のフレームと前のフレームは、キャンバスでのフレームの位置または作成したプロトタイプコネクションで決まります。

フローの開始点のあるプロトタイプ

プロトタイプに開始点がある場合は、プロトタイプの表示時に表示したフレームの「履歴」が作成されます。

• ←を押すと、前のフレームがあればそこに移動します。
• →を押すと、次のフレームに移動します。←を押した後のように履歴がない場合は、まだ表示されていない隣のフレームに移動します。

フローの開始点のないプロトタイプ

プロトタイプにフローの開始点がない場合は、キャンバスの座標をもとに、まずx軸の左から右に次にy軸の上から下にフレームが並べられます。

y軸が何らかの形でオフセットになっていると、フレームはばらばらに表示されます。フレームの各行に対して横方向の位置揃えを設定を行うと、上揃えすることができます。

• ←を押すと、前のフレームがあればそこに移動します。
• →を押すと、まずx軸方向に次にy軸方向に、次のフレームに移動します。

デバイスと開始点を設定する方法についてはこちら→