···

    プロトタイプのスクロールおよびオーバーフロー挙動

    はじめに

    この機能を使用できるユーザー

    すべてのチームまたはプランのユーザーは、プロトタイプでスクロールオーバーフローを使用できます。

    ファイルの編集可アクセス権限があるユーザーは、プロトタイプを作成および編集できます。

    スクロール挙動は、プロトタイプでスクロールがどのように動作するかを制御します。スクロール挙動は、スクロールオーバーフローと スクロール位置から構成されます。

    • スクロールオーバーフローは、フレームの寸法の外に出るコンテンツをユーザーが操作する方法を定義します。
    • スクロール位置は、ユーザーがその位置を超えてスクロールしたときに、フレーム上のレイヤーがどのように動作するかを定義します。

    スクロール挙動を使用して、インタラクティブなユーザーエクスペリエンスを再現するプロトタイプを構築します。

    • 長いコンテンツページの上下スクロール
    • スライダーのさまざまな要素を表示する左から右へのスクロール
    • 任意の方向へのパンまたはスクロール(インタラクティブマップなど)
    • スクロール中におけるページ上の同じ位置でのナビゲーションバーやメニューなどのオブジェクトの固定
    • その位置を過ぎてスクロールした後でもフレームの上部に留まる「付箋オブジェクト」の作成

    プロトタイプを作成するときは、インタラクションをできるだけ実際のインタラクションに近づけるようにします。一部のインタラクションでは、デザインが動的であるように見せる必要があります。

    [スクロール位置を保持] では、2つの画面間で移動するときに同じスクロール位置を保持できます。これは、縦スクロールのスクロールの深さと、横スクロール要素内部でのユーザーの位置に適用されます。

    スクロール位置の保持の詳細はこちら →

    スクロールオーバーフロー

    オーバーフロー挙動

    オーバーフロー挙動は、フレームのみに適用できます。これは、キャンバスに直接接しているフレーム(最上位フレーム)と、別のフレームまたはレイヤー内でネストされているフレームに適用されます。

    オーバーフロー挙動を適用するには、フレーム内のコンテンツが境界から外側に出ている必要があります。コンテンツ全体がフレーム内に収まるようにフレームの境界を変更する場合には、標準のスクロールが適用されます。

    Figmaでは、 スクロールなし、縦、 横、 両方向の4種類のオーバーフロー挙動がサポートされています。

    スクロールなしでは、ユーザーはフレーム内で上下にスクロールできません。フレームの境界から外に出ているコンテンツは表示されません。

    縦スクロールにより、フレーム内で 上方向と 下方向 にスワイプまたはスクロールできます。この挙動を使用して、長いウェブサイトやアプリ内のコンテンツページを下にスクロールする動作を忠実に再現します。

    A user scrolls vertically up and down a prototype.

    横スクロールでは、縦方向の位置を維持しながらフレーム内で 左方向 と 右方向にスワイプまたはスクロールできます。この挙動を使用して、製品、ギャラリー、ライブラリなどのコンテンツのスライダーを作成します。

    A user scrolls horizontally left and right on a prototype

    横スクロールと縦スクロールでは、フレーム内を任意の方向(左、右、上、下)に移動できます。この挙動を使用して、マップや拡大画像の表示のように任意の方向へのスクロールをサポートします。

    Animated image showing panning around an image of a map in a prototype

    オーバーフロー挙動の適用

    フレームにオーバーフロー挙動を適用するには、その子オブジェクトが境界の外側に出ている必要があります。適用できるオーバーフロー挙動は、各フレームで1つのみです。

    この手順はコンポーネントにも適用されます。キャンバスでインスタンスを選択し、右サイドバーで[メインコンポーネントに移動]をクリックし、元のコンポーネントの境界を調整します。

    1. キャンバスでフレームを選択します。
    2. 右サイドバーの[プロトタイプ]パネルを開きます。
    3. [スクロールの動作]セクションで、[オーバーフロー]ドロップダウンを選択します。次のいずれかを選択します。
      • スクロールなし
      • 横
      • 縦
      • 両方向
    4. プレゼンテーションアイコンをクリックして、プレゼンテーションビューでプロトタイプを表示し、結果を確認します。

    A frame is selected, and from the right sidebar Prototype tab, Vertical overflow behavior is selected.

    フレームの境界の調整

    フレームの外側に出ているコンテンツがない場合、オーバーフロー挙動を適用しようとするとエラーメッセージが表示されます。オーバーフロー挙動を適用するには、フレームの境界を調整する必要があります。

    1. 更新するフレームを選択します。
    2. 右サイドバーの[デザイン]パネルを開きます。
    3. カーソルが表示されるまで、キャンバスでフレームの境界をポイントします。
    4. バウンディングボックスをドラッグして、フレームのサイズを変更します。
    5. フレームの外側に出ているコンテンツを非表示にするには、[コンテンツを隠す]の横のボックスをオンにします。

    A frame is resized.

    制約により、オブジェクトのサイズ変更時の挙動が定義されます。制約を一時的に無視するには、次の修飾キーを押しながらフレームのサイズを変更します。
    • Mac: ⌘ Command
    • Windows: Ctrl

    スクロール位置

    スクロール位置挙動はフレーム内のどのレイヤーにも適用できます。フレーム上のオブジェクトごとに、固有のスクロール位置を定義できます。

    Figmaでは、親もスクロール、固定、付箋の3種類のスクロール位置をサポートしています。

    位置

    親と一緒にスクロールするオブジェクトでは、スクロールするときにフレームが上下に移動します。この挙動を使用して、長いページのコンテンツを上下にスクロールする挙動を忠実に再現します。

    Scrolling through a prototype with objects that all scroll with the parent frame.

    固定されたオブジェクトは、上下にスクロールしても移動しません。これにより、オブジェクトの位置をロックして、同じ場所に留まらせることができます。固定レイヤーを使用して、ステータスバーをデバイスの上部に固定したり、メニューをフレームの下部に固定したりします。

    固定スクロール位置をオートレイアウト付きのフレーム上のオブジェクトに割り当てることはできません。

    Scrolling through a prototype, with one object fixed to the top of the frame and one object fixed to the bottom of the frame.

    固定オブジェクトを作成すると、そのレイヤーはデザイン内で他のレイヤーよりも上に移動され、レイヤーパネルで固定のラベルが付けられます。スクロールオブジェクトを固定レイヤーの上に配置することはできません。

    The layers panel shows layers labeled as Fixed.

    付箋オブジェクトは、親フレーム内でスクロールとして開始しますが、オブジェクトの上端がフレームの上部に到達すると固定になります(再度上にスクロールすると、オブジェクトは剥がれ、親フレームを下に移動します)。

    ヒント! Figmaコミュニティで付箋スクロールのプレイグラウンドファイルを参照してください→ 

    付箋スクロール位置を使用して、ナビゲーションメニューまたは衝突ヘッダーをデザインできます。

    付箋オブジェクトは、縦スクロールにのみ適用します。付箋スクロール位置をオブジェクトに適用するために、オブジェクトの親フレームはそのオーバーフロー挙動が縦に設定される必要があります。フレームの下、左、右側にはオブジェクトを貼り付けることはできません。

    Scrolling through a prototype with several sticky objects.

    注: レイヤーパネルを確認して、プロトタイプでの付箋オブジェクトのスタックがどのようになっているか調べてください。付箋オブジェクトの下のレイヤーは、これらの付箋オブジェクトの背面でスクロールしますが、付箋オブジェクトの上のレイヤーは、それらの全面でスクロールします。

    レイヤーへのスクロール位置の適用

    スクロール位置は、フレーム内の個々のレイヤーに適用されます。それぞれのオブジェクトには1つのスクロール位置のみを適用できます。

    1. キャンバスでオブジェクト、グループ、またはコンポーネントを選択します。
    2. 右サイドバーで、 [プロトタイプ] パネルを開きます。
    3. [スクロール挙動]セクションで、[位置]ドロップダウンを選択します。次のいずれかを選択します。
      • 親もスクロール
      • 固定
      • 付箋
    4. 親アイコンをクリックして、 プレゼンテーションビューでプロトタイプを表示 し、結果を確認します。

    Related Videos