![figma-how-to-change-screen-size-on-preview](https://images.ctfassets.net/ubv4j9m3121x/7sLrspCYUK9ZltgbsaOJir/2932fd1e676bbc7561c925416d3d6b4a/figma-how-to-change-screen-size-on-preview.png?w=1200&h=630&q=50&fm=png)
Figmaのプレビューで画面サイズの縦横比を維持する方法
今回はFigmaでプロトタイプのプレビュー表示の画面サイズの縦横比を維持する方法を紹介します。主にプロトタイプでの画面の表示領域を指定したディスプレイサイズの縦横比でプレビューしたい場合などに有効な方法です。
この記事のターゲット
Figmaのプレビューの画面サイズを指定したい方
プロトタイプのプレビューで画面の縦横比をフレーム基準にしたくない方
デフォルト状態でのプレビューの表示設定
特に何も指定しないでフレームをプレビュー表示させた場合のプレビュー実行時のオプションは次の通りです。
実際のサイズ(100%)
現在Figmaを開いているウインドウサイズに関係なく、実際のpixelサイズに対して等倍表示する
画面に合わせる
現在Figmaを開いているウインドウサイズに合わせて、プロトタイプのデバイス設定で指定したサイズの縦横比を維持して等倍表示、またはフレームよりも画面サイズが小さい場合は縮小表示する
幅に合わせる
現在Figmaを開いているウインドウサイズの幅に合わせて、実際のpixelサイズに対して等倍表示、またはフレームよりも画面サイズが小さい場合は縮小表示する
全画面表示
現在Figmaを開いているウインドウサイズに合わせて、プロトタイプのデバイス設定で指定したサイズに関係なく、フレーム全体を拡大または縮小表示する
お気づきの通り、基準とするサイズと挙動があべこべなので、何が起きるか想像しづらい機能となっています。
デフォルトだと、「画面に合わせる」を選択時の挙動は「全画面表示」と同じになります。
これでは指定した縦横比のディスプレイでの全体感の確認がしづらく、Figmaを開いている画面サイズに合わせて縦横比を固定して表示したい場合に、フレーム自体のサイズを調整指定しなければならないので不便ですね。
プレビューの画面サイズの縦横比を維持する方法
プレビューで指定した画面サイズの縦横比を維持して表示したい場合は、以下の2つの設定が必要になります。
フレームのプロトタイプのプロパティで「デバイス」を「なし」から「カスタムサイズ」等に変更して値を指定する
プレビューのオプションを「画面に合わせる」にする
値を直接指定したい場合は「カスタムサイズ」となりますが、一般的なディスプレイサイズやデバイスに応じた画面モックを指定したい場合は、以下の記事で設定方法を紹介していますので参考にしてみてください。