Figmaのセクションは、同じキャンバスにある複数の画面やコンポーネントを、名前付きの範囲にまとめる機能です。Shift + Sで作成できます。たとえば「購入フロー」にカート・入力・完了画面をまとめると、関係する画面を同じ場所で確認できます。
セクション・フレーム・ページの使い分け
| 機能 | まとめる単位 | 使う場面 |
|---|---|---|
| ページ | ファイル内のキャンバス | ワイヤー・完成デザインなど作業場所を切り替える |
| セクション | キャンバス上の範囲 | 関係する画面やフローを見渡す |
| フレーム | 画面や部品のレイヤー | 寸法・オートレイアウト・制約を設定する |
セクションはフレームや別のセクションを含められます。フレームやグループの中にはセクションを入れられません。画面サイズや内部のレイアウトは、セクション内のフレームで設定します。セクションの配置仕様、フレームの機能
あなたはどっち？まとめたい単位から選ぶ判定フロー
ページ・セクション・フレームは、次の順で使い分けます。
- ワイヤーと完成デザインなど、作業場所を切り替えたい：ページを使います。ファイル内のキャンバスを分けます。
- 関係する画面やフローを、同じキャンバスで見渡したい：セクションを使います。キャンバス上の範囲に、名前を付けてまとめます。
- 画面や部品の、寸法・オートレイアウト・制約を設定したい：フレームを使います。
- 既存の複数の画面を、あとからまとめたい：画面を選んで右クリックし、Wrap in new sectionを選びます。
画面サイズや内部のレイアウトは、セクション内のフレームで設定します。
セクションを作成して画面を入れる
- 編集権限のあるファイルを開きます。
- Shift + S、またはリージョンツールからSectionを選びます。
- キャンバスをドラッグして範囲を作ります。
- 関係するフレームを範囲内へ移動します。
既存の複数の画面を選んで右クリックし、Wrap in new sectionを選ぶ方法もあります。名前付きの範囲で包む操作です。公式の作成方法
2026年10月12日に撮影した、現在のFigmaの画面です。
2つのフレームを選んで右クリックすると、メニューに「新しいセクションで囲む」（Ctrl＋S）があります。
本文の「Wrap in new section」は、日本語表示ではこの項目にあたります。
実行すると、2つのフレームが「Section 1」に入りました。
名前・背景色・枠線を変更する
キャンバス上のタイトル、またはレイヤーパネルの名前をダブルクリックして変更します。「A案」「B案」だけでは内容を区別しにくい場合は、「会員登録／レビュー前」「会員登録／採用案」のように対象と状態を併記する作例が使えます。
セクションを選ぶと、右サイドバーのFill・Strokeで背景と枠線を変更できます。色だけに意味を持たせず、名前でも用途を示すと縮小表示時に区別できます。
掲載画像は2024年4月のUIです。ツールバーや設定欄の位置は現行画面と異なる場合があります。
中身を残してセクションだけを削除する
通常のDelete／Backspaceでセクションを削除すると、中の要素も削除されます。枠だけを外す場合の公式ショートカットは、WindowsではCtrl + Backspace、MacではCommand + Deleteです。対象のセクションを選択してから使います。削除方法の公式説明
重要なデザインでは複製を作り、意図した階層が選択されているかを確認して操作します。上位のセクションと、中のフレームの選択を取り違えないようにします。
押さえておきたい最新仕様と注意点
2026年10月12日の画面で、セクションを選んだときのデザインパネルを確認しました。
- セクションを選ぶと、位置・レイアウト（幅と高さ、間隔）・外観・塗り・線が表示される
- この画面では、セクションの大きさは1500×660、間隔は100、角の半径は2だった
- 塗りは444444、線はFFFFFF（不透明度10%、内側、太さ1）だった
- 右クリックのメニューには、「選択範囲のグループ化」「選択範囲のフレーム化」「新しいセクションで囲む」が並んでいる
メニューの名前やショートカットは、Figmaの更新で変わることがあります。
よくある質問：Figmaのセクションで迷ったときのチェックリスト
セクションは、どのキーで作りますか？
Shift + Sで作成できます。リージョンツールからSectionを選ぶ方法もあります。
フレームの中に、セクションを入れられますか？
入れられません。セクションはフレームや別のセクションを含められますが、フレームやグループの中にはセクションを入れられません。
セクションを削除すると、中の画面も消えますか？
通常のDelete／Backspaceでセクションを削除すると、中の要素も削除されます。枠だけを外す場合の公式ショートカットは、WindowsではCtrl + Backspace、MacではCommand + Deleteです。対象のセクションを選択してから使います。
セクションの削除で、気をつけることは？
重要なデザインでは、複製を作り、意図した階層が選択されているかを確認して操作します。上位のセクションと、中のフレームの選択を取り違えないようにします。
Ready for devにすると、内容はロックされますか？
ロックされません。セクションをReady for devにして、まとまった範囲の開発準備状況を示せますが、この状態は内容をロックする機能ではありません。
プロトタイプで、セクションに接続するとどうなりますか？
そのセクションで最後に訪れたフレームへ戻る動作に利用できます。
開発への引き渡しとプロトタイプ
セクションをReady for devにして、まとまった範囲の開発準備状況を示せます。この状態は内容をロックする機能ではありません。利用するプランや権限を含めた手順はDev Modeの使い方で確認できます。
プロトタイプでセクションへ接続すると、そのセクションで最後に訪れたフレームへ戻る動作に利用できます。画面間の基本的な接続はプロトタイプの作り方を参照してください。セクションのプロトタイプ仕様