プロトタイプを再生
はじめに
この機能を使用できるユーザー
プロトタイプは あらゆるチームまたはプランのユーザーが再生できます
ファイルまたはプロトタイプへの閲覧のみ
のアクセス権のある任意のユーザーがプロトタイプを再生できます。プレゼンテーションビューの表示オプションは誰でも調整できます。
プロトタイプでデザインの操作方法を再現できるため、開発に移行する前にデザインの動作を確認してテストすることができます。キャンバスに直接構築したプロトタイプを再生して、プロトタイプの操作やアニメーションの動作を確認できます。
プロトタイプを再生する前に、プロトタイプがデザインどおりに再生されるようにデザインを準備します。
次に、次の中からプロトタイプの再生方法を選択します。
- プレビュー: インラインプレビューで、プロトタイプをエディターで直接再生します。プレビューを使用すると、同じタブを使って構築したプロトタイプの動作を確認できます。
- プレゼンテーション: プロトタイプを別のタブにプレゼンテーションビューで再生します。プレゼンテーションを使用すると、プロトタイプを他のユーザーと共有したり、特定のデバイス上での見え方を確認したりすることができます。
プロトタイプの再生の準備
キャンバスでのフレームとコネクションのセットアップによって、プロトタイプの再生のされ方は次のように変わります。
- プレビューまたはプレゼンテーションを行うためには、デザインがフレーム内に存在している必要があります。
- プロトタイピングコネクションがある場合は、プロトタイプの再生時にコネクションのあるフレームのみが再生されます。それぞれの画面をクリックしたり、任意のホットスポットで操作したりできます。
- プロトタイピングコネクションがない場合は、現在のページからフレーム内を移動できます。
- フローの開始点をセットアップして、プロセスの開始点を指定することができます。複数のフローの開始点を指定することができます。
- プレゼンテーションビューの場合は、プロトタイプ設定でプロトタイプのデバイスタイプ、開始点、背景の色を設定します。
プロトタイプを再生する準備ができたら、プレビューまたは プレゼンテーションを選択します。
プロトタイプのプレビュー
インラインプレビューを使用すると、デザインと並行してキャンバスに直接プロトタイプを再生できます。インラインプレビューでは、あらゆるデザインの変更が直ちにプレビューに反映されます。
インラインプレビューを開くには、一番上にあるツールバーで プレビューをクリックします。
フローの開始点にあるプレビューアイコンをクリックして、インラインプレビューを開くこともできます。
キーボードのShift Spaceを使うこともできます。
スマートフォンやタブレットなど、実物感のあるコンテナにプレビューを配置するには、プロトタイプ設定のデバイスタイプを設定します。
インラインプレビューの使用方法
インラインプレビューで次の操作を行えます。
- プロトタイプを再開: キャンバスで最後に選択したフレームからプロトタイプを再開します。Rを押しても再開できます。
-
オーバーフローメニュー:
- 実際のサイズ(100%)に変更: プロトタイプデバイスがページに置かれている場合は、インラインプレビューのサイズをデバイスフレームのサイズに合わせて調整します。デバイスフレームが設定されていない場合は、選択したフレームのサイズに合わせてインラインプレビューを調整します。
- アスペクト比に合わせてサイズを変更: プロトタイプデバイスがページに置かれていない場合、現在のフレームのアスペクト比に合わせてインラインプレビューのサイズを調整します。
- アクティブなフレームをフォロー: 有効にすると、キャンバスの選択したフレームの更新がインラインプレビューの現在のフレームにミラーリングされます。プレビューのプロトタイプ内を移動すると、キャンバスと位置も移動します。
- プレゼンテーションプレビューで開く: プレゼンテーションビューでプロトタイプを開きます。
- インラインプレビューを閉じます。
インラインプレビューでは、次の操作が行えます。
- サイズ変更: インラインプレビューの端をクリックしてドラッグすると、サイズを変更できます。シフトを押すと拡大縮小できます。
- キャンバスでフレームを選択: キャンバスで別のフレームをクリックすると、そのフレームのプレビューに飛ぶことができます。
プロトタイプのプレゼンテーション
プレゼンテーションビューを使用すると、新しいタブでプロトタイプを再生できます。
ヒント: プロトタイプを他のユーザーと共有する必要がありますか? プロトタイプを共有する方法についてはこちら →
プレゼンテーションビューでプロトタイプを開くには、ツールバーで [プレゼンテーション]をクリックするか、キーボードで次のショートカットを使用します。
- Mac:⌘ Command⌥ Optionreturn
- Windows: ControlAltenter
プレゼンテーションビューのレイアウト
プレゼンテーションビューでは、次の操作が行えます。
- をクリックすると、左のサイドバーを表示したり非表示にしたりすることができます
- をクリックすると、コメントモードになりプロトタイプにコメントを追加できます
- フローの表示と選択
- フローの説明の表示
- プロトタイプビューのオプションの設定
- をクリックすると、全画面モードになります
- Figmaでは選択した背景色でデバイスに表示できます
- 選択したデバイスをプロトタイプの設定に表示します
- カーソルまたはタッチインジケーター(モバイルデバイスのプロトタイプのみ)を表示します
- ホットスポットで操作するか、プロトタイプ内でキーボードのショートカットを入力します
- とを使用して画面間を移動できます。キーボードの矢印キーを使用することもできます。
- [再開]ボタンまたはRを押すと、現在のフローの開始点に戻ります。フローがない場合は、キャンバスの最初のフレームに戻ります。
プレゼンテーションビューのオプション
オプションメニューで、次の設定のオン/オフを切り替えることができます。
拡大縮小
拡大縮小でプロトタイプを表示するサイズを指定します。以下から選択できます。
- 実際のサイズ(100%): フレームのフルサイズを基にしてプロトタイプを表示します。フレームと画面のサイズによっては、プロトタイプがトリミングされることがあります。
- 画面に合わせる: 閲覧者の画面サイズに合わせてプロトタイプを縮小します。
- 幅に合わせる: 閲覧者の画面サイズの幅に合うように、プロトタイプを拡大縮小します。このオプションが使用できるのは、カスタムフレームサイズを使用しており、デバイスが選択されていない場合だけです。
- 全画面表示: 画面サイズと解像度に関わらず、画面全体に表示されるようにプロトタイプを拡大縮小します。幅に合わせるとは異なり、全画面表示ではプロトタイプを大画面全体に拡大できます。
ヒント: プレゼンテーションビューでZキーを押すと、拡大縮小オプション間を移動できます。
Figmaキーボードショートカットの有効化
次のようなFigmaキーボードショートカットを有効にします。
- Cでコメントを開く
- Fで全画面表示にする
有効にすると、キーボードの左右の矢印などのキーでプロトタイプ内を移動できます。
無効にすると、ホットスポットをクリックするか、または画面下部の左右の矢印アイコンをクリックすることでのみ移動できます。
解決済みコメントの表示
Figmaアカウントにログインしていれば、返信または解決のためなどのコメントをプロトタイプに書くことができます。
プロトタイプに解決済みコメントを表示するかどうかを選択します。解決済みコメントは、あらゆる新規あるいは未解決のコメントの横に表示されます。
ホットスポットのヒントの表示
ホットスポットのヒントはプロトタイプ全体を通じて役立ちます。ヒントはプロトタイプ内のホットスポットに表示されます。ホットスポットの外をクリックすると、青色のバウンディングボックスでクリックできる領域がハイライトされます。
サイドバーの表示
プロトタイプフローは、左のサイドバーに説明とともに表示されます。プレゼンテーションビューでのサイドバーの表示/非表示の切り替えは、一番上のツールバーをクリックして行います。ツールバーの[オプション]メニューで、[サイドバーを表示]にチェックを入れて表示することもできます。
サイドバーが表示されている場合、プロトタイプの共有リンクの更新は&show-proto-sidebar=1
バリアントで行います。
Figma UIの表示
プレゼンテーションビューで、FigmaのプロトタイプUIの表示/非表示を切り替えることができます。これは、プロトタイプのテスト中に、目障りにならないようにするのに便利です。
プレゼンテーションビューでFigma UIを非表示にすると、Figmaの画面は次のようになります。
- 現在のビューのツールバーとフッターが非表示になります。
- [サイドバーを表示]([オプション]メニュー)にチェックが入っている場合は、フローサイドバーが非表示になります。
- プロトタイプURLは
&hide-ui=1
バリアブルで更新します。 - ツールバーとフッターを表示する方法を示します。
- 更新した共有リンクをコピーすることができます。このリンクを共有すると、他の閲覧者にはツールバー、フッター、サイドバーが非表示になります。
メモ: [オプション]メニューで設定を調整すると、共有されているプロトタイプのURLが更新されます。変更を行う場合は、新しいURLをコピーするようにしてください。
フレームの順序付けと移動
プロトタイプの再生時に、→、Space、またはNを押すと次のフレームに移動でき、←を押すと前のフレームに戻れます。この設定はデフォルトで有効になっています。
次のフレームと前のフレームは、キャンバスでのフレームの位置または作成したプロトタイプコネクションで決まります。
フローの開始点のあるプロトタイプ
プロトタイプに開始点がある場合は、プロトタイプの表示時に表示したフレームの「履歴」が作成されます。
-
←
を押すと、前のフレームがあればそこに移動します。 -
→
を押すと、次のフレームに移動します。←
を押した後のように履歴がない場合は、まだ表示されていない隣のフレームに移動します。
フローの開始点のないプロトタイプ
プロトタイプにフローの開始点がない場合は、キャンバスの座標をもとに、まずx軸の左から右に次にy軸の上から下にフレームが並べられます。
y軸が何らかの形でオフセットになっていると、フレームはばらばらに表示されます。フレームの各行に対して横方向の位置揃えを設定を行うと、上揃えすることができます。
-
←
を押すと、前のフレームがあればそこに移動します。 -
→
を押すと、まずx軸方向に次にy軸方向に、次のフレームに移動します。