
公開日: 2023.08.04 | 更新日: 2023.09.01
Figmaのプロトタイプのスクロール制御に関する設定
今回はFigmaでプロトタイプを作成するときのスクロール制御に関する設定を紹介します。縦方向のスクロールだけでなく、横方向や画面の中の一部分のみスクロールさせたい場合などの参考になればと思います。
この記事のターゲット
Figmaのプロトタイプでスクロール方向を制御したい方
Figmaのプロトタイプで画面表示サイズを固定したい方
Figmaのプロトタイプでスクロール時に要素を固定したい方
プロトタイプの設定
プロトタイプを作成する際にスクロールを制御したい場合、フレームのサイズに対してプロトタイプを表示するサイズの指定が必要になります。
デフォルトでは、サイズを指定しない場合はFigmaを起動しているブラウザやクライアントアプリケーションの表示領域(viewport)の解像度を基準とした拡大率に応じて、フレームが全て入り切らない場合は自動で縦横にスクロールできるような挙動になります。
表示する画面領域のサイズを固定したい場合は、縦横の値を設定するか、表示したいデバイスの画面サイズを選択する必要があります。
画面表示領域(サイズ)の設定
プロトタイプで表示する際の画面サイズは、任意のサイズを指定するか、特定のデバイスや規格のサイズを指定するなどの方法があります。
任意の画面サイズ(縦幅・横幅のpx)を指定する場合
任意のサイズをpxで指定する手順は以下の通りです。
右ペインの「プロトタイプ」タブを選択
デバイスを「なし」から「カスタムサイズ」を指定
W(横幅)とH(縦幅)入力ができるようになるので、それぞれのサイズを入力

特定のデバイスの画面サイズ(モックアップ表示付き)を指定する場合
iPhoneやMac、標準的なAndroidの端末解像度で表示させたい場合の手順は以下の通りです。
右ペインの「プロトタイプ」タブを選択