プロトタイプ作成時のセクションの使用 – Figma Learn - ヘルプセンター

セクションは、キャンバスでフレームを視覚的にグループ化する最適な方法であり、プロトタイプで必要なコネクションを数を減らすことができます。

セクションへのプロトタイプコネクションを作成すると、Figmaによって記憶されているそのセクションで最後にアクセスしたフレームに自動的に戻ります。

例

A connection from a frame to a section

eコマースアプリに次の2つのセクションを作成します。

チェックアウトページには「閲覧」セクションに戻るための「戻る」ボタンがあります。ユーザーが「戻る」ボタンをクリックすると、最後に閲覧していたフレーム、すなわち製品タイプに自動的に戻ります。

セクションを使用しない場合、「戻る」ボタンに、そのボタンがクリックされたときに戻るフレームを固定する必要があり、そのフレームは実際の直前のフレームと異なる場合があります。結果として、ユーザーが体験する内容をプロトタイプが正確に反映しない可能性があります。

セクションによるフレームの整理

最初に、フレームをセクションに分けます。

各セクションで、同じユーザーフローの各部分を構成するフレームをまとめます。以下に、例を示します。

セクションを作成するには、以下の手順を行います。

ヒント: 既存のフレームの上にセクションをドラッグすると、それらのフレームがセクション内に自動的に配置されます。

プロトタイプコネクションの移動先としてセクション全体を設定できます。

コネクションがセクションに移動すると、Figmaに記憶されているそのセクション内の直近にアクセスしたフレームに戻ります。

セクションへのコネクションの移動先を設定するには、次の手順に従います。