Figmaのプレビューで画面サイズの縦横比を維持する方法

今回はFigmaでプロトタイプのプレビュー表示の画面サイズの縦横比を維持する方法を紹介します。主にプロトタイプでの画面の表示領域を指定したディスプレイサイズの縦横比でプレビューしたい場合などに有効な方法です。

この記事のターゲット

• Figmaのプレビューの画面サイズを指定したい方

• プロトタイプのプレビューで画面の縦横比をフレーム基準にしたくない方

デフォルト状態でのプレビューの表示設定

特に何も指定しないでフレームをプレビュー表示させた場合のプレビュー実行時のオプションは次の通りです。

• 実際のサイズ（100%）

  • 現在Figmaを開いているウインドウサイズに関係なく、実際のpixelサイズに対して等倍表示する

• 画面に合わせる

  • 現在Figmaを開いているウインドウサイズに合わせて、プロトタイプのデバイス設定で指定したサイズの縦横比を維持して等倍表示、またはフレームよりも画面サイズが小さい場合は縮小表示する

• 幅に合わせる

  • 現在Figmaを開いているウインドウサイズの幅に合わせて、実際のpixelサイズに対して等倍表示、またはフレームよりも画面サイズが小さい場合は縮小表示する

• 全画面表示

  • 現在Figmaを開いているウインドウサイズに合わせて、プロトタイプのデバイス設定で指定したサイズに関係なく、フレーム全体を拡大または縮小表示する

お気づきの通り、基準とするサイズと挙動があべこべなので、何が起きるか想像しづらい機能となっています。

デフォルトだと、「画面に合わせる」を選択時の挙動は「全画面表示」と同じになります。

これでは指定した縦横比のディスプレイでの全体感の確認がしづらく、Figmaを開いている画面サイズに合わせて縦横比を固定して表示したい場合に、フレーム自体のサイズを調整指定しなければならないので不便ですね。

プレビューの画面サイズの縦横比を維持する方法

プレビューで指定した画面サイズの縦横比を維持して表示したい場合は、以下の2つの設定が必要になります。

1. フレームのプロトタイプのプロパティで「デバイス」を「なし」から「カスタムサイズ」等に変更して値を指定する

2. プレビューのオプションを「画面に合わせる」にする

値を直接指定したい場合は「カスタムサイズ」となりますが、一般的なディスプレイサイズやデバイスに応じた画面モックを指定したい場合は、以下の記事で設定方法を紹介していますので参考にしてみてください。

Figmaのプロトタイプのスクロール制御に関する設定

今回はFigmaでプロトタイプを作成するときのスクロールに制御に関する設定を紹介します。縦方向のスクロールだけでなく、横方向や画面の中の一部分のみスクロールさせたい場合などの参考になればと思います。 ... 続きを読む

この記事を読んだ方におすすめの記事

Figmaで画面タブを分割して２画面表示する方法

今回は、Figmaの画面タブを２画面に分割して表示する方法を紹介します。FigJamを眺めながらFigmaで画面レイアウトを作成したり、プロトタイプで画面全体を表示しながらコンポーネントを調整するなどの使い方ができます。 ... 続きを読む

Figmaの画面レイアウトや配置に関する機能のまとめ

FigmaでUIや画面のレイアウトを設計する際に便利な機能やテクニックのまとめです。 ... 続きを読む

Figmaで汎用的なUIコンポーネントを作る方法

今回はFigmaで汎用的なUIコンポーネントを作る方法をいくつか紹介します。この記事の方法では、プラグインなどは利用せずにFigmaの基本機能のみで作成できます。実際のサンプルデータもあわせて用意しているので、参考にしてみてください。 ... 続きを読む