Figmaの「Section」で創る、カオス知らずの秩序あるデザイン宇宙
やあ。デザインの現場で、気づけばカンバスが「ゴミ屋敷」のようになり、どこに何があるか分からず絶望したことはないかな？
大規模なプロダクト開発において、Figmaは強力な武器ですが、設計思想なしに使うとすぐに破綻します。今日は、プロフェッショナルが現場で実践している、「Section」機能を活用した、散らからないカンバス構築の極意を伝授しましょう。
これをマスターすれば、あなたのファイルは「カオス」から「美しく整備された庭園」へと生まれ変わります。
—
1. なぜ「Section」が革命的なのか？
これまで、私たちは「Frame」の中にすべてを詰め込んできました。しかし、Frameはあくまで「表示領域」の単位であって、「概念的な区切り」ではありません。
Figmaの「Section」は、単なるグループ化機能ではありません。「カンバス上の地図における論理的な境界線」です。これを導入する最大のメリットは以下の3点です。
- 視覚的・論理的なゾーニング: どこがワイヤーで、どこが本番デザインか、迷う隙を与えない。
- プロトタイピングの爆速化: Section単位で画面遷移を制御できる。
- 開発者への親切心: 「どこを見ればいいか」を瞬時に伝えられる。
—
2. 基礎セットアップ：カオスを寄せ付けない「3層構造」
まずは、どんなプロジェクトでも使える「鉄板の構成」から始めましょう。カンバスを以下の3つのSectionで区切るのが、私の推奨する「HelloWorld」的な基本形です。
ステップ1：Sectionの設置
1. `Shift + S` を押し、「Section」ツールを選択。
2. カンバス上に大きな箱を描き、名前をつけます。
ステップ2：3つの聖域（ゾーン）を作成
以下の3つのSectionを並べて配置してください。
1. [Zone: Discovery]
- ユーザーフロー、マインドマップ、リサーチ資料。
2. [Zone: Design System & Assets]
- コンポーネント、トークン、アイコン、カラーパレット。
3. [Zone: Production]
- ワイヤーフレーム、デザインカンプ、開発用仕様書。
—
3. 「Section-based Navigation」でプレゼンを変える
Sectionの真価は、プレゼン時の「ナビゲーション」にあります。
Figmaのサイドバーにある「Layers」パネルを見てください。Sectionで囲った要素は、自動的にその配下に格納されます。これにより、プレゼン中に左側のパネルからSectionをクリックするだけで、瞬時に目的のエリアへジャンプできます。
現場で役立つTip：ステータス管理
Sectionのヘッダー部分には、現在のステータスを可視化するタグを置いておきましょう。
- `[Draft]`：作業中（誰にも見せたくない）
- `[Review]`：チームレビュー待ち
- `[Ready for Dev]`：開発者へ渡す準備完了
こうすることで、エンジニアは「Ready for Dev」と書かれたSectionだけを見れば良いという共通認識が生まれます。これが、開発者とデザイナーのシームレスな連携の第一歩です。
—
4. これをやるだけで「プロ」に見える：運用ルール
最後は、この環境を維持するための極めてシンプルなルールです。
- Sectionの外に要素を置かない: 「一時的なメモ」であっても、必ず適当なSectionの中に入れましょう。外にあるものは「無価値なゴミ」と見なす、という厳格なルールをチームで共有してください。
- 親子関係を意識する: FrameをSectionの外に放り出すのは禁止。必ずSectionという「大きな屋根」の下に収めてください。
- 色は意味を持つ: Sectionに背景色を設定し、ゾーンごとに色分けしましょう（例：デザイン仕様は青、リサーチは黄色）。これにより、俯瞰した瞬間にプロジェクトの全体像が脳に飛び込んできます。
—
最後に：ツールは「思考」を映す鏡
デザインツールを使いこなすとは、単にショートカットを覚えることではありません。「情報をどのように構造化し、他者にどう伝えるか」という設計者の思考そのものをカンバスに定着させることです。
今日からSectionを使い始めれば、明日の朝、あなたがファイルを開いた瞬間のストレスは劇的に軽減されているはずです。
もし分からなくなったら、いつでもここに戻ってきてください。あなたのデザインが、より整然と、そして創造的なものになることを心から願っています。さあ、次はどんな素晴らしいプロダクトを作りますか？