プロトタイプのスクロールおよびオーバーフロー挙動
はじめに
この機能を使用できるユーザー
すべてのチームまたはプランのユーザーは、プロトタイプでスクロールオーバーフローを使用できます。
ファイルの編集可アクセス権限があるユーザーは、プロトタイプを作成および編集できます。
スクロール挙動は、プロトタイプでスクロールがどのように動作するかを制御します。スクロール挙動は、スクロールオーバーフローと スクロール位置から構成されます。
- スクロールオーバーフローは、フレームの寸法の外に出るコンテンツをユーザーが操作する方法を定義します。
- スクロール位置は、ユーザーがその位置を超えてスクロールしたときに、フレーム上のレイヤーがどのように動作するかを定義します。
スクロール挙動を使用して、インタラクティブなユーザーエクスペリエンスを再現するプロトタイプを構築します。
- 長いコンテンツページの上下スクロール
- スライダーのさまざまな要素を表示する左から右へのスクロール
- 任意の方向へのパンまたはスクロール(インタラクティブマップなど)
- スクロール中におけるページ上の同じ位置でのナビゲーションバーやメニューなどのオブジェクトの固定
- その位置を過ぎてスクロールした後でもフレームの上部に留まる「追従オブジェクト」の作成
プロトタイプを作成するときは、インタラクションをできるだけ実際のインタラクションに近づけるようにします。一部のインタラクションでは、フレーム間でスクロール位置を記憶、共有して、デザインが常に動き、変化しているように見せる必要があります。
状態管理により、画面から画面に遷移するときに同じスクロール位置を保持できます。スクロール位置を画面間で共有したくないときは、フレームへのインタラクションで状態をリセットするか、オブジェクトの名前を変更して一致しないようにします。
スクロールオーバーフロー
オーバーフロー挙動
オーバーフロー挙動は、フレームのみに適用できます。これは、キャンバスに直接接しているフレーム(最上位フレーム)と、別のフレームまたはレイヤー内でネストされているフレームに適用されます。
オーバーフロー挙動を適用するには、フレーム内のコンテンツが境界から外側に出ている必要があります。コンテンツ全体がフレーム内に収まるようにフレームの境界を変更する場合には、標準のスクロールが適用されます。
Figmaでは、 スクロールなし、縦、 横、 両方向の4種類のオーバーフロー挙動がサポートされています。
スクロールなしでは、ユーザーはフレーム内で上下にスクロールできません。フレームの境界から外に出ているコンテンツは表示されません。
縦スクロールにより、フレーム内で 上方向と 下方向 にスワイプまたはスクロールできます。この挙動を使用して、長いウェブサイトやアプリ内のコンテンツページを下にスクロールする動作を忠実に再現します。
横スクロールでは、縦方向の位置を維持しながらフレーム内で 左方向 と 右方向にスワイプまたはスクロールできます。この挙動を使用して、製品、ギャラリー、ライブラリなどのコンテンツのスライダーを作成します。
横スクロールと縦スクロールでは、フレーム内を任意の方向(左、右、上、下)に移動できます。この挙動を使用して、マップや拡大画像の表示のように任意の方向へのスクロールをサポートします。
オーバーフロー挙動の適用
フレームにオーバーフロー挙動を適用するには、その子オブジェクトが境界の外側に出ている必要があります。適用できるオーバーフロー挙動は、各フレームで1つのみです。
この手順はコンポーネントにも適用されます。キャンバスでインスタンスを選択し、右サイドバーで[メインコンポーネントに移動]をクリックし、元のコンポーネントの境界を調整します。
- キャンバスでフレームを選択します。
- 右サイドバーの[プロトタイプ]パネルを開きます。
-
[スクロールの動作]セクションで、[オーバーフロー]ドロップダウンを選択します。次のいずれかを選択します。
- スクロールなし
- 横
- 縦
- 両方向
- プレゼンテーションアイコンをクリックして、プレゼンテーションビューでプロトタイプを表示し、結果を確認します。
フレームの境界の調整
フレームの外側に出ているコンテンツがない場合、オーバーフロー挙動を適用しようとするとエラーメッセージが表示されます。オーバーフロー挙動を適用するには、フレームの境界を調整する必要があります。
- 更新するフレームを選択します。
- 右サイドバーの[デザイン]パネルを開きます。
- カーソルが表示されるまで、キャンバスでフレームの境界をポイントします。
- バウンディングボックスをドラッグして、フレームのサイズを変更します。
- フレームの外側に出ているコンテンツを非表示にするには、[コンテンツを隠す]の横のボックスをオンにします。
- Mac: ⌘ Command
- Windows: Ctrl
スクロール位置
スクロール位置挙動はフレーム内のどのレイヤーにも適用できます。フレーム上のオブジェクトごとに、固有のスクロール位置を定義できます。
Figmaでは、親とスクロール、固定、追従の3種類のスクロール位置をサポートしています。
位置
親と一緒にスクロールするオブジェクトでは、スクロールするときにフレームが上下に移動します。この挙動を使用して、長いページのコンテンツを上下にスクロールする挙動を忠実に再現します。
固定されたオブジェクトは、上下にスクロールしても移動しません。これにより、オブジェクトの位置をロックして、同じ場所に留まらせることができます。固定レイヤーを使用して、ステータスバーをデバイスの上部に固定したり、メニューをフレームの下部に固定したりします。
固定スクロール位置をオートレイアウト付きのフレーム上のオブジェクトに割り当てることはできません。
固定オブジェクトを作成すると、そのレイヤーはデザイン内で他のレイヤーよりも上に移動され、レイヤーパネルで固定のラベルが付けられます。スクロールオブジェクトを固定レイヤーの上に配置することはできません。
縦スクロールのある最上位フレームにある任意のオブジェクトに追従スクロール位置を適用します。つまり、最上位フレームの直接の子フレームや、最上位フレームの別のレイヤー内にネストされているオブジェクトに追従フレームを適用することができます。
追従オブジェクトは親フレーム内でスクロールとして開始しますが、オブジェクトの上端が親フレームの最上部に到達すると固定されます(再度下にスクロールすると、オブジェクトは親フレームを下に移動するようになります)。
ヒント: 親、子、兄弟、最上位フレームは、Figmaのオブジェクト間の関係を表す用語です。Figmaのレイヤー階層について詳しくはこちら→
最上位フレームの別のレイヤー内にネストしている場合、追従オブジェクトが直接の親の境界の外に出ることはありません。つまり、直接の親のレイヤーがビューからスクロールアウトすると、追従オブジェクトはその親のスクロールを再開します。
注: レイヤーパネルを確認して、プロトタイプでの追従オブジェクトのスタックがどのようになっているか調べてください。追従オブジェクトの下のレイヤーは、これらの追従オブジェクトの背面でスクロールしますが、追従オブジェクトの上のレイヤーは、それらの全面でスクロールします。
レイヤーへのスクロール位置の適用
スクロール位置は、フレーム内の個々のレイヤーに適用されます。それぞれのオブジェクトには1つのスクロール位置のみを適用できます。
- キャンバスでオブジェクト、グループ、またはコンポーネントを選択します。
- 右サイドバーで、 [プロトタイプ] パネルを開きます。
-
[スクロール挙動]セクションで、[位置]ドロップダウンを選択します。次のいずれかを選択します。
- 親とスクロール
- 固定
- 追従
- プレゼンテーションアイコンをクリックして、プレゼンテーションビューでプロトタイプを表示し、結果を確認します。