魂を込めたプロトタイプ：Figmaで「本物」のモーダル＆ドロワーを作る極意
こんにちは。UI/UXの現場で日々、ピクセルとロジックの狭間に身を置いているエンジニアです。
Figmaのプロトタイプ機能は、単なる「画面の紙芝居」ではありません。正しく設計すれば、開発者に仕様を正確に伝え、ユーザーの脳内に「本物のアプリ体験」をインストールする強力な武器になります。
今回は、多くのデザイナーが苦戦する「Interactive Components」と「Scroll Overflow」を組み合わせた、実アプリ同等のモーダル・ドロワー実装術を伝授します。これさえマスターすれば、あなたのプロトタイプは「カチカチ動く絵」から「触れるプロダクト」へと進化します。
—
1. なぜ「画面遷移」だけでは不十分なのか？
初心者のうちは、モーダルを表示するために「画面A→画面B」へ遷移させがちです。しかし、これではダメです。なぜなら、「背後のコンテンツがスクロールできない」「背景のオーバーレイとのインタラクションが不自然」という、アプリの魂とも言える体験が欠落するからです。
私たちが目指すのは、「メイン画面はそのままに、特定のレイヤーだけが重なり、かつ個別にスクロールする」というエンジニアリングに近い挙動です。
—
2. 核心：コンポーネント構造の設計術
複雑なプロトタイプを破綻させないための鉄則は「コンポーネントの入れ子構造」です。
ステップA：ベースとなるコンポーネントの作成
モーダル本体を一つのコンポーネント（例: `Modal/Container`）として切り出します。ここで重要なのは、Auto Layoutを駆使することです。
- Header / Body / Footer をAuto Layoutで縦に並べる。
- `Body` 部分に「Fill Container」を設定する。
- ここが重要： `Body` 自体に `Vertical Scrolling` を設定し、高さを固定します。これにより、モーダル全体ではなく「中身だけがスクロールする」という、ネイティブアプリの挙動が再現されます。
ステップB：Interactive Componentsでの状態管理
モーダルの「表示/非表示」を、プロトタイプ画面の遷移ではなく、バリアント（Variants）で行います。
1. コンポーネントに `State`（Open / Closed）というプロパティを作る。
2. `Closed` 状態では `Opacity: 0`、`Open` 状態では `Opacity: 1` に設定。
3. この「コンポーネントの状態変化」をトリガーにすることで、プロトタイプ画面を増やすことなく、モーダルを滑らかに制御できます。
—
3. 実装の極意：オーバーレイとフォーカストラップ
「本物っぽさ」を演出する最大のポイントは、「背景のクリック判定」と「フォーカストラップ」です。
背景のクリック判定（閉じる処理）
- モーダルの背後に `Overlay` 用の半透明の四角形を配置します。
- そのオーバーレイに対し、「On Click」でコンポーネントのStateを `Closed` に戻すアクションを付与します。
- これにより、ユーザーが背景を叩いた時に「すっ」と消える、あの心地よいインタラクションが完成します。
疑似フォーカストラップの考え方
プロトタイプ上で完全にフォーカストラップ（Tabキーでモーダル外に行かせない処理）を実装するのは困難ですが、「背後のレイヤーを無効化する」という演出でこれをカバーします。
- モーダルが `Open` の時に、背後のメイン画面に「半透明の黒レイヤー（遮蔽用）」を重ねる設計にしてください。ユーザーの意識を強制的にモーダル内へ誘導する、UXの定石です。
—
4. 精度を高める「HelloWorld」的セットアップ手順
まずは最小単位でこの挙動を体感してみましょう。
1. フレーム作成: `Desktop` フレームを一つ用意。
2. コンポーネント作成: `Modal` という名前のフレームを作り、`Auto Layout` で縦積みに。
3. スクロール設定: 中身のテキストが長くなるようにし、フレームの `Overflow` を `Vertical` に設定。
4. バリアント化: `+` ボタンを押してバリアントを追加。`Closed` 状態は透明にしておく。
5. プロトタイプ接続: `Open` 状態のボタンと、`Closed` 状態のオーバーレイ背景を相互に接続。「Smart Animate」を選択することを忘れないでください。これが「命」です。
—
現場のエンジニアから最後に一言
プロトタイプが複雑化して管理不能になるのは、「ロジックをプロトタイプ画面に詰め込みすぎるから」です。
すべてのロジックは「コンポーネントの中」に封じ込めてください。画面遷移図はあくまで「骨組み」であり、インタラクションの「筋肉」はコンポーネント自身が持っているべきです。
「このボタンを押すと、どう動くべきか？」を自問自答しながら、1ピクセルずつ魂を込めて調整する。その積み重ねが、いずれあなたを「ただのオペレーター」から「プロダクトを創造するデザイナー」へと押し上げてくれます。
さあ、Figmaを開いて、あなたの設計したモーダルに息を吹き込んでみてください。きっと、今までのものとは違う「本物の手触り」がそこに生まれているはずです。