はじめに

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

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

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

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

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

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

プロトタイプの再生準備

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

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

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

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

インラインプレビューを使用して、キャンバス上のデザインと並行してプロトタイプを直接再生します。インラインプレビューでは、デザインの変更が即座にプレビューに反映されるため、リアルタイムで変更を確認できます。キャンバス上の別のフレームをクリックすると、プレビューはそのフレームにジャンプします。

アニメーションの四角が表示されるインラインプレビューはキャンバスの上部にあり、元のデザインは下のキャンバスにあります

インラインプレビューを開くには、以下のいずれかを実行します。

最上部のツールバーで[プレビュー]をクリック
任意のフロー開始点にあるプレビューアイコンをクリック
キーボードの⇧ Shift Spaceを使用

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

左右の矢印を使ってプロトタイプを前後に移動。
キャンバス上で最後に選択されたフレームからプロトタイプを再開。Rを押して再開することもできます。
オーバーフローメニューを開いて、プロトタイプのさまざまな拡大縮小オプションを選択。
プロトタイプを新しいタブでプレゼンテーションビューで開く。
インラインプレビューを閉じるにはXをクリック。
プレビューウィンドウの端をクリックしてドラッグすることで、プレビューのサイズを変更。⇧ Shiftを押しながら操作すると、比率を保ったまま拡大・縮小できます。

オーバーフローメニューのオプション

インラインビューアのオーバーフローメニューには、プロトタイプのさまざまなスケーリングと表示オプションが含まれています。利用可能なオプションは、プロトタイプデバイスを選択しているかどうかによって異なります。これらのオプションの一部は重複しています。

幅に合わせる

プロトタイプのスケールをディスプレイの幅に合わせて調整します。このオプションは、ページ上でプロトタイプデバイスがデバイスなしまたはプレゼンテーションに設定されている場合にのみ利用可能です。

レスポンシブ

プロトタイプの内容は、デザインに適用された制約とオートレイアウトプロパティに応じて、プロトタイプビューアのサイズ変更に合わせてサイズ変更および再レイアウトされます。これにより、さまざまなウィンドウサイズでデザインを表示し、そのレスポンシブ動作を確認することができます。レスポンシブを機能させるには、デザインに制約とオートレイアウトの設定を適用する必要があります。

プロトタイプに従う

キャンバス上の選択されたフレームは、インラインプレビューでの現在のフレームをミラーリングして更新されます。プレビューでプロトタイプ内を移動すると、キャンバスの選択と位置も移動します。

ウィンドウ/デバイスのサイズを100%に変更

ビューアまたはデバイスのサイズをフレームサイズの100%に変更します。

アスペクト比を維持

インラインビューアウィンドウは、現在のフレームのアスペクト比に合わせてサイズ変更されます。プロトタイプデバイスがデバイスなしに設定されている場合のみ利用可能です。

デバイスフレームを表示

物理デバイスフレームを表示または非表示にします。プロトタイプデバイスフレームが選択されている場合にのみ利用可能です。

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

プレゼンテーションビューを使用すると、新しいタブでプロトタイプを再生できます。ホットスポットで操作するか、プロトタイプ内でキーボードショートカットを入力できます。

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

Mac:⌘ Command⌥ Optionreturn
Windows: ControlAltenter

Figmaでは選択した背景色でデバイスに表示できます。

ヒント: プロトタイプを他の人と共有する場合は、プロトタイプの共有に関する詳細を確認してください。

プロトタイプをモバイルで再生する場合は、モバイルデバイスでプロトタイプを表示する方法に関する詳細を確認してください。

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

プレゼンテーションビューには、プロトタイプとやり取りするために選択できるさまざまなオプションが含まれています。

ツールバーの左側から次の操作を行えます。

Figmaロゴをクリックしてファイルブラウザに移動。
をクリックして左サイドのバーを表示/非表示。サイドバーからフローを選択して説明を表示できます。
をクリックしてコメントモードを有効にし、プロトタイプにコメントを追加。

ツールバーの右側から次の操作を行えます。

アバターの横にある矢印をクリックして、自分にスポットライトを当てるかプレゼンターをフォローするを選択。
このプロトタイプを共有
オプションメニューを開いて、プロトタイプのさまざまな設定を選択。
をクリックして全画面モードにする。

プレゼンテーションビューの下部から次の操作を行えます。

左右の矢印を使って画面間を移動。
デバイススイッチャーを使用して、類似のデバイスに切り替え、他の拡大縮小オプションにアクセス。ページにデバイスフレームが選択されている場合に利用可能です。
[再開]をクリックするか、Rを押して現在のフローの開始点に戻る。フローがない場合は、キャンバス上の最初のフレームに戻ります。

オプションメニュー

追加設定のためのオプションメニューを開くには、をクリックします。

次のオプションは常に利用可能です。

Figmaショートカットを有効にする

次のようなFigmaキーボードショートカットを有効にします。

Cでコメントを開く
Fで全画面表示にする

有効にすると、キーボードの左右の矢印などのキーでプロトタイプ内を移動できます。

無効にすると、ホットスポットをクリックするか、または画面下部の左右の矢印アイコンをクリックすることでのみプロトタイプ内を移動できます。

クリックでヒントを表示

ホットスポットヒントはプロトタイプ全体を通じて役立ちます。ヒントはプロトタイプ内のホットスポットに表示されます。ホットスポットの外をクリックすると、青色のバウンディングボックスでクリックできる領域がハイライトされます。

オフラインで利用

プロトタイプを事前ロードして、オフライン中にプレゼンテーションを行えます。

アクセシビリティ設定

アクセシビリティ設定は、障害を持つ方がプロトタイプにアクセスしてやり取りするのに役立ちます。例えば、視覚障害を持つ方は、プロトタイプをスクリーンリーダーや他の支援技術に適応させることができます。

UIを非表示

プレゼンテーションビューで、FigmaのプロトタイプUIの表示/非表示を切り替えることができます。これは、プロトタイプのテスト中に不要な要素を排除したい場合に便利です。

プレゼンテーションビューでFigma UIを非表示にすると、Figmaの画面は次のようになります。

現在のビューのツールバーとフッターが非表示になります。
[サイドバーを表示] ([オプション]メニュー)にチェックが入っている場合は、フローサイドバーが非表示になります。
プロトタイプURLは&hide-ui=1バリアブルで更新されます。
ツールバーとフッターを復元する方法が示されます。
更新した共有リンクをコピーすることができます。このリンクを共有すると、他の閲覧者にはツールバー、フッター、サイドバーが非表示になります。

注: [オプション]メニューで設定を調整すると、共有されているプロトタイプのURLが更新されます。変更を行う場合は、新しいURLをコピーするようにしてください。

オプションメニューには、プロトタイプやデバイスフレームの表示とサイズ変更を決定するためのコンテンツとデバイスの拡大縮小オプションも含まれています。利用可能な拡大縮小オプションの種類は、プロトタイプデバイスを選択しているかどうかによって異なります。

デバイスフレームなし ↓
デバイスフレームあり ↓

デバイスフレームなしの拡大縮小オプション

ページ上でプロトタイプデバイスが選択されていない場合、オプションメニューは以下のコンテンツ拡大縮小オプションを提供します。

実際のサイズ(100%)

デザインフレームのフルサイズに基づいてプロトタイプを表示します。フレームや画面サイズによっては、プロトタイプが切り取られる可能性があります。

レスポンシブ

プロトタイプの内容は、デザインに適用された制約とオートレイアウトプロパティに応じて、プロトタイプビューアのサイズ変更に合わせてサイズ変更および再レイアウトされます。これにより、さまざまなウィンドウサイズでデザインを表示し、そのレスポンシブ動作を確認することができます。レスポンシブが機能するためには、デザインに制約とオートレイアウト設定が適用されている必要があります。

幅に合わせる

プロトタイプのスケールをディスプレイの幅に合わせて調整します。

幅と高さを合わせる

プロトタイプの幅と高さの両方がビューアウィンドウ内に収まるように縮小します。プロトタイプは拡大されません。

画面全体に表示

プロトタイプを水平方向と垂直方向に拡大縮小し、ディスプレイ全体に合わせて調整します。デザインのコンテンツはオーバーフローしません。

フレームのサイズによっては、プロトタイプは特定のスケーリング設定をデフォルトとし、オプションメニューの[推奨および他の拡大縮小オプション]セクションにさまざまなオプションが表示されます。

	デフォルトのスケーリング設定	他の推奨および拡大縮小オプション
最初のフレーム幅が1024pxよりも広い	実際のサイズ(100%)	レスポンシブ
最初のフレーム幅が1024px未満	実際のサイズ(100%)	幅と高さを合わせる
すべてのフレームが16:9のフォーマット、またはデバイスタイプがプレゼンテーションに設定	画面全体に表示	実際のサイズ(100%)
デバイスタイプがカスタムに設定されている場合	幅と高さを合わせる	画面全体に表示実際のサイズ(100%)

デバイスフレームありの拡大縮小オプション

デバイスフレームがある場合、オプションメニューはレスポンシブと固定サイズの拡大縮小オプションを提供します。

レスポンシブ

固定サイズ

デザインをデバイス内で100％表示します。フレームとデバイスのサイズによっては、これによりプロトタイプがトリミングされる可能性があります。デバイスの拡大縮小オプションでデバイスのサイズを調整できます。

プロトタイプのデバイスが選択されている場合、プレゼンテーションビューの下部にデバイススイッチャーが表示され、現在のものに似たプロトタイプデバイスを選択できます。また、以下から選択できるデバイスの拡大縮小オプションも利用できます。

デバイスを画面に合わせる

ビューアウィンドウに収まるようにデバイスフレームを縮小します。

デバイスを画面全体にズーム

デバイスのスケールをディスプレイ全体に合わせて調整します。

100%でデバイスを表示

プロトタイプをフレームのサイズ100％で表示します。フレームと画面のサイズによっては、これによりプロトタイプがトリミングされる可能性があります。

デバイスフレームを表示

プロトタイプデバイスが選択されている場合、このオプションにより、物理デバイスフレームの表示または非表示が可能になります。

ヒント: プレゼンテーションビューでキーボードのZを押すと、拡大縮小オプション間を移動できます。

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

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

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

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

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

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

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

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

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

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

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