プロトタイプのスクロールおよびオーバーフロー挙動
はじめに
この機能を使用できるユーザー
すべてのプランで利用できます
ファイルの編集可
アクセス権があれば、ユーザーはプロトタイプを作成および編集できます。
プロトタイプでスクロールとパンの動作を設定し、以下のようなユーザーインタラクションを再現します。
- 長いコンテンツページの上下スクロール
- スライダーのさまざまな項目を表示する左右スクロール
- インタラクティブマップのような任意の方向へのパンまたはスクロール
- スクロール時にナビゲーションバーやメニューなどのオブジェクトをページ上の1つの位置に固定
- その位置を過ぎてスクロールした後でもフレームの上部に留まる「追従オブジェクト」の作成
Figmaプロトタイプでスクロールを使用するには、以下の対応が必要です。
- スクロール用フレームの準備: コンテンツがフレームの寸法の境界を超えるようにします。
- フレームにスクロールオーバーフローを適用: フレームに、縦スクロール、横スクロール、縦横スクロール、スクロールなしを定義します。
- フレーム内のオブジェクトにスクロール位置を適用: スクロール移動時のフレーム内オブジェクトの動作を定義します。親フレームとの同時スクロールや、定位置での表示、親フレーム上部での固定が可能です。
スクロールを設定すると、複数のフレーム間の移動時にスクロール位置の保存やリセットもできます。
スクロール用フレームの準備
フレームにスクロール動作を追加するには、フレームの境界を超えるコンテンツがフレームにあることが必要です。
一般的なWebページと同様です。スマートフォンでページを閲覧する場合、画面のサイズに合ったコンテンツしか表示されません。画面に表示されない「隠れた」コンテンツがあり、それはスクロールしなければ見ることができません。
フレームの寸法を超えたコンテンツの拡張
フレームのサイズを変更するには、次の手順に従います。
- 更新するフレームを選択します。
- 右サイドバーの[デザイン]パネルを開きます。
- カーソルが表示されるまで、フレームの端にポインターを合わせます。
- バウンディングボックスをドラッグして、フレームのサイズを変更します。
- Mac: ⌘ Command
- Windows: Ctrl
選択したフレーム内に各オブジェクトが収まっているか確認するには、[レイヤー]パネルをチェックします。子オブジェクトは親フレームの下にネスティングされます。
コンテンツを隠す
[コンテンツを隠す]で、フレームの境界を超えるコンテンツを非表示にできます。
- 更新するフレームを選択します。
- 右サイドバーの[デザイン]パネルを開きます。
- 右サイドバーの[フレーム]セクションで、[コンテンツを隠す]の横にあるボックスにチェックを入れます。
フレームへのスクロールオーバーフローの適用
スクロールオーバーフローは、フレームの寸法の外に出るコンテンツをユーザーが操作する方法を定義します。
オーバーフロー挙動はフレームにのみ適用できます。これは、キャンバス上の直接のフレーム(最上位フレーム)だけでなく、別のフレームまたはレイヤー内でネストされているフレームにも適用されます。
フレームにスクロールオーバーフローを適用するには、以下の手順に従います。
- フレームを選択します。
- 右サイドバーで、 [プロトタイプ] パネルを開きます。
-
[スクロール挙動]セクションで、[オーバーフロー]ドロップダウンを選択します。次のいずれかを選びます。
- スクロールなし
- 横
- 縦
- 両方向
注: 感嘆符の付いたエラーメッセージ(「このフレームでスクロールが適切に動作するためには、コンテンツをフレームよりも大きくする必要があります」)が表示される場合は、フレームの寸法よりもフレームのコンテンツを拡張するというスクロール用フレームの準備が必要です。
垂直方向
縦スクロールでは、スワイプまたは上下にスクロールできます。この挙動を使用して、長いウェブサイトやアプリ内のコンテンツページのスクロールダウンを再現します。
水平方向
横スクロールでは、縦方向の位置を維持しながら、左右にスワイプまたはスクロールできます。これを利用して、製品、ギャラリー、ライブラリなどのコンテンツのスライダーを作成できます。
スクロールなし
スクロールなしでは、任意の方向にスクロールできません。フレームの境界を超えたコンテンツは表示されません。
両方向
両方向(縦横方向)により、地図や拡大画像の表示のようにあらゆる方向に移動することができます。
フレーム内オブジェクトへのスクロール位置の適用
スクロール位置には、スクロール移動時のフレーム内レイヤーの動作を定義します。各レイヤーに適用できるスクロール位置は1つだけです。
- オブジェクト、グループ、コンポーネントを選択します。オブジェクトは、スクロールオーバーフローが適用されているフレーム上のものでなければなりません。
- 右サイドバーで、 [プロトタイプ] パネルを開きます。
-
[スクロール挙動]セクションで、[位置]ドロップダウンを選択します。次のいずれかを選びます。
- 親とスクロール
- 固定
- 追従
親とスクロール
親と同時にスクロールするオブジェクトは、スクロールに合わせてフレームを上下に移動します。この挙動を利用して、長いコンテンツページを上下にスクロールする動作を再現します。
固定
固定されたオブジェクトは、上下にスクロールしても移動しません。このオプションは、ステータスバーをデバイス上部に固定したり、メニューをフレーム下部に固定するのに使用します。
オブジェクトに絶対位置が適用されている場合を除き、オートレイアウトのフレーム内でオブジェクトに固定スクロール位置を割り当てることはできません。
オブジェクトを固定に設定すると、オブジェクトはフレーム内の他のレイヤーの上に移動し、レイヤーパネルで固定と表示されます。固定レイヤーの上には、スクロールオブジェクトを配置できません。
追従
縦スクロールするフレーム内の任意のオブジェクトに、追従スクロール位置を適用します。
追従オブジェクトは最初はスクロールしますが、オブジェクトの上端が親フレームの最上部に達すると固定されます(再度上にスクロールすると、オブジェクトは親フレームを下に移動します)。
ヒント: 親、子、兄弟、最上位フレームは、Figmaのオブジェクト間の関係を表す用語です。Figmaのレイヤー階層について詳しくはこちら→
追従オブジェクトがフレーム内の別のレイヤーにネストされている場合、直接の親の境界内にとどまります。つまり、直接の親レイヤーがスクロールして表示外になった場合でも、追従オブジェクトは引き続き親レイヤーと同時にスクロールされます。
[レイヤー]パネルをチェックして、スクロール時に追従オブジェクトがどのようにスタックするかを確認します。追従オブジェクトの下にあるレイヤーはその背面でスクロールし、上にあるレイヤーはその前面でスクロールします。追従スクロールのためにオブジェクトのスタック順序を変更するには[レイヤー]パネルで変更します。
注: オートレイアウトのフレームでは、[レイヤー]パネルでレイヤーを再配置すると、キャンバス上のレイヤーの表示順序が変わります。
デフォルトでは、オートレイアウトのフレーム内のオブジェクトは、キャンバスのスタッキング設定が最後が上に設定されています。つまり、フレームスタックの下部にあるレイヤーは、それよりも上にあるレイヤーの前面に表示されます。
レイヤーが上から下へスタックするように順序を逆にします。
- [オートレイアウトのフレーム]を選択します。
- 右サイドバーの[オートレイアウト]セクションで、[高度なオートレイアウト]を選択します。
- [キャンバススタッキング]ドロップダウンメニューで[最後が上]を選択します。
スクロール位置の保存とリセット
プロトタイプに複数のページまたは画面がある場合、スクロール位置の保存やフレーム間のスクロール位置のリセットを選択できます。
- スクロール位置を保存: フレーム間の遷移時にユーザーのスクロール位置を保存します
- スクロール位置のリセット: フレーム間の遷移時にユーザーのスクロール位置をリセットします
プロトタイプでスクロール位置を保存またはリセットする方法の詳細 →
注: スクロール位置の保存はプロトタイプの状態管理の一種です。状態管理を使用すると、プロトタイプの再生時にフレーム内やフレーム間を移動する場合に、オブジェクトのプロパティと状態を保存できます。これはスクロール位置、インタラクティブコンポーネント、動画にも適用できます。