プロトタイプデバイスと背景の設定を指定する
プレゼンテーションビューとインラインプレビューの両方でプロトタイプがユーザーに対してどのように表示されるようにするか制御できます。これにより、プロトタイプをよりリアルに感じたり、ブランドに適していると感じたりできます。
プロトタイプ設定にアクセスする
プロトタイプ設定にアクセスするには:
- キャンバスの空白のエリアをクリックすると、オブジェクトを選択解除できます。
- 右側のスライドバーから [プロトタイプ] タブを選択します。
- デバイス: プレゼンテーションビューで使用されているデバイスのタイプ、向き、およびモデルをカスタマイズします。
- 背景: プレゼンテーションビューでプロトタイプを再生する際の背景の色を設定します。
- フロー: 現在のページでプロトタイプフローを表示して管理します。プロトタイプフローの詳細を見る →
デバイス
デバイス設定を使用して、実物感のあるコンテナにプロトタイプを配置します。インラインプレビューまたはプレゼンテーションビューを使用して、プロトタイプを再生する場合、デバイスコンテナが表示されます。
デバイス
Figmaには、人気のデバイスプリセットが多数あります。プロトタイプのフレームの寸法によって、利用可能なオプションが決まります。
-
フレームプリセット: フレームプリセットを使用すると、Figmaはそのプリセットに一致するデバイスを選択します。必要に応じて、別のデバイスを選択することもできます。たとえば、iPhone 15 Pro Maxのフレームプリセットを使用している場合、FigmaはiPhone 15 Pro Maxもデバイスとして選択します。
- プレゼンテーションビュー: すべてのデバイスタイプのフレームプリセットが使用できます。
- インラインプレビュー: モバイルデバイス(電話、時計、タブレット)のフレームプリセットが使用できます
- カスタムサイズ (自動調整) : カスタムサイズは、デザインが自動で拡大縮小されるため、プロトタイプを表示している画面内に収まるように自動調整されます。これは、プレゼンテーションビューでのみ適用されます。[カスタムサイズ] を選択した場合、インラインプレビューでプロトタイプを再生するとデバイスが表示されなくなります。
- プレゼンテーション (フル) : プロトタイプを画面全体に表示できるサイズで表示します。これは、プレゼンテーションビューでのみ適用されます。[プレゼンテーション] を選択した場合、インラインプレビューでプロトタイプを再生するとデバイスが表示されなくなります
デバイスの向き
プレゼンテーションビューでのデバイス方向を制御します。次の中から選択できます。
- 縦
- 横
注: プロトタイプ内で向きを切り替えることはできません。プロトタイプに縦横両方のフレームがある場合はご注意ください。
モデル
選択したデバイスに応じて、特定のモデルを指定できます。たとえば、iPhone 15 Pro Maxは、4つの異なる色が用意されています。
プレビュー
プレゼンテーションビューでは、デバイスの表示方法をプレビューできます。
背景
プレゼンテーションビューで、選択したデバイスの背後に表示するのカスタム背景カラーを選択します。
たとえば、ユーザーがコンテンツに集中できるように背景をニュートラルカラーに設定したり、さらに洗練させるためにブランドカラーを使用したりできます。