【実務・中級編】Figmaの「Interactive Components」と「Scroll Overflow」を組み合わせたリアルなモーダル＆ドロワー実装の極意 – UI/UX・デザインツール活用バイブル

諸君、Figmaの深淵なる世界へようこそ。
私は長年、UI/UXの最前線で刀を振るってきた者だ。デザインと開発の壁を打ち破り、プロダクトを真の価値へと導くために、Figmaという強力な武器をどう研ぎ澄ますか。その極意を、今日、君たちに伝授しよう。

一般的なFigmaのチュートリアルは、単なる機能紹介に過ぎない。しかし、我々が目指すのは、開発者が「これならすぐに実装できる」と膝を打つような、生きたプロトタイプだ。特に、モーダルやドロワーといった複雑なインタラクションは、単なる画面遷移では表現しきれない。そこで本稿では、Figmaの「Interactive Components」と「Scroll Overflow」を組み合わせ、実アプリ同等のリアルなモーダル＆ドロワーを実装する「極限の知見」を、魂を込めて解説する。

開発スピードを劇的に高める隠れたショートカット、絶対入れるべき神プラグイン、そしてチーム開発におけるベストプラクティスまで、現場で震えるほど役立つ情報を詰め込んだ。覚悟して読み進めてほしい。

—

Figmaで「生きた」モーダル＆ドロワーを実装する極意

我々が日々目にするアプリやウェブサイトのモーダルやドロワーは、ただ要素が表示されるだけではない。背景のスクロールが固定され、モーダル内は独立してスクロールし、オーバーレイをクリックすれば閉じ、キーボード操作にも対応する。これらの繊細なインタラクションこそが、ユーザー体験を豊かにする。Figmaでこれをどこまで表現できるか。その答えは、Interactive ComponentsとScroll Overflowの巧みな連携にある。

1. 単なる画面遷移を超えた、実アプリ同等のスクロール連動型モーダルの作り方

従来のFigmaプロトタイピングでは、モーダルを開くたびに新しいフレームへ遷移させるのが一般的だった。これは、モーダルが開いた際の背景のスクロール位置がリセットされたり、アニメーションが不自然になるなど、多くの課題を抱えていた。Interactive Componentsの登場により、この状況は一変した。

1.1. 基本構造：Interactive Componentsによるモーダルの開閉

まず、モーダル自体をInteractive Componentsとして定義する。

1. モーダルコンポーネントの作成:

  • モーダルの背景となるオーバーレイ（半透明のRectangle）と、モーダル本体のBoxをグループ化し、Auto Layoutを適用する。
  • モーダル本体のコンテンツ（タイトル、本文、ボタンなど）もAuto Layoutで組み上げる。
  • このグループ全体をコンポーネント化する (`Ctrl/Cmd + Alt/Option + K`)。

2. バリアントの定義:

  • 作成したコンポーネントを選択し、プロパティパネルの「Variants」セクションで新しいプロパティを追加する。例えば `State` というプロパティを作成し、`closed` と `open` の2つのバリアントを作る。
  • `closed` バリアントは、モーダル本体を画面外に配置するか、`Opacity: 0%` に設定する（`Display: none` はFigmaのプロトタイプではアニメーションに不向き）。オーバーレイも同様に`Opacity: 0%`。
  • `open` バリアントは、モーダルが画面中央に表示され、オーバーレイも適切な透明度で表示される状態にする。

3. プロトタイプ接続:

  • モーダルを開くトリガーとなる要素（ボタンなど）から、モーダルコンポーネントのインスタンス（`closed` 状態）へプロトタイプ接続する。
  • インタラクション設定は「Change to」で `open` バリアントを選択。アニメーションは「Smart Animate」を選び、`Ease Out` や `Ease In & Out` で自然な動きを演出する。
  • モーダル内の閉じるボタンやオーバーレイからは、`closed` バリアントへの「Change to」を設定する。

1.2. Scroll Overflowによるモーダル内部のスクロール

モーダル本体のコンテンツが画面の高さを超える場合、モーダル内部のみをスクロールさせる必要がある。ここで「Scroll Overflow」の出番だ。

1. スクロールエリアの特定:

  • モーダルコンポーネンスの `open` バリアントを開く。
  • モーダル本体の中で、スクロールさせたいコンテンツ（例: 長いテキストやリスト）をAuto Layoutフレームで囲む。
  • このフレームの高さに制約を設け（`Fixed height`）、親のモーダル本体の高さよりも小さく設定する。
  • 重要: フレームの `Clip content` を必ずチェックする。これがなければScroll Overflowは機能しない。

2. Scroll Overflowの適用:

  • スクロールさせたいコンテンツを囲んだフレームを選択した状態で、プロトタイプパネルを開く。
  • 「Overflow scrolling」セクションで、「Vertical scrolling」を選択する。
  • これで、プロトタイプ実行時にモーダル内部のフレームが独立してスクロールするようになる。

1.3. 背景のスクロール固定（擬似再現）

モーダルが開いた際に背景のコンテンツがスクロールしないように見せるのは、Figmaのプロトタイプ単体では直接的な「スクロールロック」機能がないため、工夫が必要だ。しかし、最も効果的なのは「モーダルが背景を完全に覆い隠す」ことと、「モーダル内部のスクロールに集中させる」ことだ。

1. モーダルのオーバーレイを全画面に:

  • モーダルコンポーネント内のオーバーレイ（半透明のRectangle）は、必ずビューポート全体を覆うようにサイズを設定する。
  • このオーバーレイが最前面に表示されることで、ユーザーは背景のコンテンツにアクセスできなくなり、結果的にスクロールできないように感じる。
  • モーダルコンポーネント自体を、メインコンテンツの親フレームの上に配置する（レイヤー順を最前面にする）。

2. インタラクションの集中:

  • ユーザーはモーダルが開いている間は、モーダル内部のコンテンツに集中することを期待している。Scroll Overflowをモーダル内部に適用することで、この期待に応える。
  • 開発フェーズではCSSの`overflow: hidden;`や`position: fixed;`を``や``に適用するが、Figmaではその「結果」をデザインとして示すことが重要だ。
  • もし背景コンテンツのスクロールを完全に止めたいという厳密な再現を求められる場合は、メインコンテンツのコンポーネントに `scrollable` と `not-scrollable` のバリアントを作成し、モーダルが開いた際にメインコンテンツのバリアントを切り替える方法もあるが、これは非常に複雑化し、メンテナンスコストが高くなるため、よほどの理由がない限り推奨しない。

2. オーバーレイ背景のクリック判定やフォーカストラップの疑似再現

リアルなインタラクションには、ユーザーの予期せぬ操作への対応も含まれる。

2.1. オーバーレイ背景のクリック判定

モーダルの外側、つまりオーバーレイ部分をクリックすることでモーダルを閉じるのは、非常に一般的なUXパターンだ。

1. Interactive Componentの活用:

  • モーダルコンポーネントの `open` バリアント内のオーバーレイ（半透明のRectangle）を選択する。
  • プロトタイプパネルで「Interaction」を追加する。
  • Trigger: `On click`
  • Action: `Change to`
  • Destination: `closed` バリアント
  • Animation: `Smart Animate` で適切な速度とイージングを設定。

これで、プロトタイプ実行時にオーバーレイをクリックすると、モーダルが滑らかに閉じるようになる。

2.2. フォーカストラップの疑似再現と開発への橋渡し

アクセシビリティの観点から、モーダルが開いている間はフォーカスがモーダル内部の要素に限定される「フォーカストラップ」は非常に重要だ。Figmaのプロトタイプ機能では、JavaScriptのような高度なフォーカストラップを直接実装することはできない。しかし、デザイナーとしてその「意図」を明確に開発者に伝えることはできる。

1. デザインシステムでの定義:

  • モーダルコンポーネントのドキュメントに、フォーカストラップの挙動（例: 「Tabキーでモーダル内の要素のみを巡回し、Shift+Tabで逆順に巡回すること」「モーダル外へのフォーカス移動を禁止すること」）を明記する。
  • キーボード操作時のフォーカスリングのスタイル（色、太さなど）を定義し、コンポーネントのインタラクティブな状態として示す。

2. プロトタイプでの示唆:

  • モーダルコンポーネントのバリアントとして、フォーカスが当たった状態のボタンや入力フィールドを作成し、インタラクションフローの中でその状態遷移を示す。
  • 例えば、モーダルが開いた直後、最初にフォーカスすべき要素（例: 閉じるボタン、または一番重要なアクションボタン）に、フォーカス時のスタイルを適用したバリアントを置いておく。
  • 開発者への申し送り: Figmaのコメント機能 (`C`キー) を使い、「このモーダルはフォーカストラップを実装してください」と直接指示を書き込む。

3. プロトタイプの複雑化を防ぎながらメンテナンス性を保つコンポーネント構造の設計術

デザインシステムを構築し、Figmaをチームで活用する上で最も重要なのは、コンポーネントの「設計思想」だ。闇雲にコンポーネントを量産しても、やがて負債となる。

3.1. Atomic Design思想に基づくコンポーネントの粒度

モーダルもAtomic Designの原則に従い、再利用性とメンテナンス性を最大化する。

  • Atoms:
  • `Button/Primary`, `Button/Secondary`
  • `Icon/Close`
  • `Textfield/Default`
  • `Typography/Heading`, `Typography/Body`
  • Molecules:
  • `Modal/Header` (タイトル、閉じるボタン)
  • `Modal/Footer` (アクションボタン群)
  • `Modal/ContentArea` (スクロール可能なコンテンツ)
  • Organisms:
  • `Modal/Base` (オーバーレイ、ヘッダー、コンテンツエリア、フッターを内包するフレーム。`size`, `hasCloseButton` などのプロパティを持つ)
  • Templates:
  • `Page/DashboardWithModal` (ページ全体にモーダルのインスタンスを配置)

この階層構造により、モーダルのヘッダーだけを修正すれば、全てのモーダルにその変更が反映される。

3.2. バリアントとプロパティの体系化

適切なプロパティ設計は、コンポーネントの柔軟性と管理性を両立させる鍵だ。

  • `Modal/Base` コンポーネントの例:
  • `state: open / closed` (Interactive Components用)
  • `size: small / medium / large`
  • `hasCloseButton: true / false`
  • `hasOverlay: true / false` (背景が透過するモーダルなど)
  • `alignment: top / center`
  • `type: primary / destructive / info` (モーダルの種類に応じたスタイル)

これらのプロパティを組み合わせることで、多様なモーダルを一つのコンポーネントで管理できる。

3.3. デザインシステムの変数 (Variables) の活用

Figmaの最新機能である「Variables」は、色、タイポグラフィ、スペーシング、ボーダーラディウスといったデザインの基本要素を一元管理し、コンポーネントに適用する強力な手段だ。

  • カラー変数: `brand/primary`, `neutral/800`, `feedback/error` など、セマンティックな名前で定義する。
  • スペーシング変数: `spacing/xs`, `spacing/sm`, `spacing/md` など。Auto Layoutのパディングやギャップに適用する。
  • タイポグラフィ変数: `font/body/large`, `font/heading/h1` など。

Variablesを活用することで、デザインの一貫性が保たれ、テーマ変更やブランド変更といった大規模な修正も、変数の値を変更するだけで瞬時に行える。これは、デザインシステムが「生きたドキュメント」として機能するための不可欠な要素だ。

—

開発スピードを劇的に高める「極限の知見」

ここからは、Figmaを日常的に使うエンジニアやデザイナーが、さらに生産性を高めるための実用的なテクニックを共有しよう。

隠れたキーボードショートカット (モーダル実装で特に役立つもの)

Figmaはショートカットの宝庫だ。これらを使いこなすことで、マウス操作の回数を劇的に減らせる。

  • `Shift + A`: 選択したオブジェクトをAuto Layoutフレームに変換。モーダル内部のコンテンツ配置には必須。
  • `Ctrl/Cmd + Alt/Option + K`: 選択した要素をコンポーネントに変換。バリアント作成の第一歩。
  • `Ctrl/Cmd + Alt/Option + V`: 選択したレイヤーにペーストして置き換え。既存のプレースホルダーをコンポーネントインスタンスに素早く置き換える際に便利。
  • `Ctrl/Cmd + /` (Quick Actions): ほとんどのFigmaコマンドを検索・実行できる。ショートカットを忘れた時や、頻繁に使わない機能に素早くアクセスしたい時に神。例えば「Create Variant」と入力すれば即座に実行できる。
  • `Alt/Option`を押しながらドラッグ: オブジェクトの複製。コンポーネントのバリアント作成時などに。
  • `Ctrl/Cmd + Shift + G`: グループ解除。コンポーネントインスタンスをデタッチする際にも使えるが、基本的には元のコンポーネントを編集するのが望ましい。
  • `Shift + 2`: 選択したフレームにズーム。モーダルの詳細を詰める際に。

絶対入れるべき神プラグイン

Figmaの可能性を無限に広げるのがプラグインだ。モーダル実装やデザインシステム構築を加速させるものを厳選した。

1. Figma Tokens (by Specify):

  • なぜ神なのか？: Figma内で定義したVariables（カラー、タイポグラフィ、スペーシングなど）をJSONやYAML形式のトークンファイルとしてエクスポートできる。これは、デザインシステムと開発コードベースを連携させるためのデファクトスタンダード。
  • 活用例: モーダルの背景色、テキストの色、パディングなどをVariablesで管理し、このプラグインで出力したトークンをCSS変数やTailwind CSSの設定に反映させる。

2. Content Reel:

  • なぜ神なのか？: ダミーテキスト、アバター画像、アイコンなどを一瞬で挿入できる。モーダルのコンテンツをリアルに埋める際に、時間の節約になる。
  • 活用例: モーダル内の長い本文テキストや、ユーザープロフィール表示などのコンテンツを素早く配置する。

3. Autoflow:

  • なぜ神なのか？: オブジェクト間のインタラクションフローを矢印で視覚化する。プロトタイプの複雑なロジックを開発者に伝える際に非常に役立つ。
  • 活用例: モーダルの開閉だけでなく、モーダル内のフォーム送信後の遷移や、エラー時の表示など、一連のフローを図示する。

4. Component Replacer:

  • なぜ神なのか？: ページ全体で特定のコンポーネントインスタンスを別のコンポーネントに一括置換できる。コンポーネントの改修やリファクタリング時に絶大な効果を発揮する。
  • 活用例: 古いモーダルコンポーネントを、新しく設計し直したインタラクティブコンポーネントに置き換える。

5. EightShapes Specs:

  • なぜ神なのか？: デザイン要素のスペック（サイズ、色、フォントなど）を素早く表示し、共有できる。開発者とのコミュニケーションを円滑にする。
  • 活用例: モーダルのパディング、フォントサイズ、ボーダーラディウスなどの具体的な数値を開発者に伝える。

チーム開発で役立つ設定の共有化ルール

Figmaをチームで最大限に活用するためには、共通のルールと設定が不可欠だ。

1. 命名規則の徹底 (Nomenclature):

  • レイヤー名: `Type/State/Variant` のように階層的に命名する (`Button/Primary/Enabled`, `Modal/Base/Open`)。
  • コンポーネント名: `/` を使って階層化し、コンポーネントライブラリを整理する (`Components/Modal/Base`, `Components/Button/Primary`)。
  • スタイル名: `Color/Brand/Primary`, `Typography/Heading/H1` など、セマンティックな意味を持つように命名する。
  • Figma Variables: `color.brand.primary`, `spacing.md` など、ドット記法で階層化する。
  • なぜ重要か: 検索性、メンテナンス性、そして開発者との共通言語となるため。

2. Figma Variables とスタイルの一元管理:

  • 「Design System」ファイル内に、全てのカラー、タイポグラフィ、エフェクト、グリッドのスタイル、そしてVariablesを定義し、プロジェクトファイルから参照させる。
  • Publishing: 定期的にデザインシステムファイルをPublishし、最新の状態をチーム全体に共有する。
  • Branching (Figma Organizationプラン): デザインシステムの大きな変更や実験的な機能開発は、ブランチを切って行い、レビューを経てマージする。

3. コンポーネントの「Description」と「Properties」:

  • 各コンポーネントに、その役割、使用ガイドライン、アクセシビリティ要件などをDescriptionとして記述する。
  • Propertiesの各バリアントについても、その意味や使い方を説明文として追加する。
  • なぜ重要か: 開発者がFigmaでコンポーネントを参照した際に、すぐにその意図と使い方を理解できるようにするため。

実用的な設定ファイル（Design Tokens）のベストプラクティス構成例

Figma自体に直接的な設定ファイルは存在しないが、Figmaで定義されたデザインシステムは、Design Tokensという形で開発コードベースと連携する。これはYAMLやJSON形式で出力され、フロントエンド開発における「設定ファイル」の役割を果たす。

以下は、Figma Tokensプラグインなどで出力されるJSON形式のDesign Tokensのベストプラクティス例だ。

// design-tokens.json (Figma Tokensなどで出力される例)
{
“color”: {
“brand”: {
“primary”: {
“value”: “#1A73E8”, // Figmaで定義したブランドカラー
“type”: “color”,
“description”: “主要なアクションやブランド要素に使用される色。”
},
“secondary”: {
“value”: “#673AB7”,
“type”: “color”,
“description”: “ブランドを補完する色。”
}
},
“neutral”: {
“text”: {
“value”: “#212121”,
“type”: “color”,
“description”: “主要なテキスト色。”
},
“background”: {
“value”: “#FFFFFF”,
“type”: “color”,
“description”: “ページ背景色。”
},
“overlay”: {
“value”: “rgba(0, 0, 0, 0.4)”, // モーダルのオーバーレイ色
“type”: “color”,
“description”: “モーダルやドロワーの背景に重ねる半透明色。”
}
},
“feedback”: {
“error”: {
“value”: “#D32F2F”,
“type”: “color”,
“description”: “エラーメッセージやネガティブなアクションに使用。”
}
}
},
“spacing”: {
“xs”: {
“value”: “4px”,
“type”: “spacing”,
“description”: “最小のスペーシング。”
},
“sm”: {
“value”: “8px”,
“type”: “spacing”,
“description”: “小規模なスペーシング（例: アイコンとテキストの間）。”
},
“md”: {
“value”: “16px”,
“type”: “spacing”,
“description”: “中規模なスペーシング（例: ボタンのパディング、コンポーネント間のマージン）。”
},
“lg”: {
“value”: “24px”,
“type”: “spacing”,
“description”: “大規模なスペーシング。”
}
},
“font”: {
“family”: {
“base”: {
“value”: “Noto Sans JP, sans-serif”,
“type”: “fontFamily”,
“description”: “基本的なフォントファミリー。”
}
},
“size”: {
“base”: {
“value”: “16px”,
“type”: “fontSize”,
“description”: “基本のフォントサイズ。”
},
“h1”: {
“value”: “32px”,
“type”: “fontSize”,
“description”: “H1見出しのフォントサイズ。”
}
},
“weight”: {
“regular”: {
“value”: “400”,
“type”: “fontWeight”,
“description”: “標準のフォントウェイト。”
},
“bold”: {
“value”: “700”,
“type”: “fontWeight”,
“description”: “太字のフォントウェイト。”
}
}
},
“border”: {
“radius”: {
“sm”: {
“value”: “4px”,
“type”: “borderRadius”,
“description”: “小さな角丸。”
},
“md”: {
“value”: “8px”,
“type”: “borderRadius”,
“description”: “中程度の角丸（例: モーダルの角）。”
}
}
},
“breakpoint”: {
“sm”: {
“value”: “640px”,
“type”: “dimension”,
“description”: “モバイルとタブレットのブレイクポイント。”
},
“md”: {
“value”: “768px”,
“type”: “dimension”,
“description”: “タブレットとデスクトップのブレイクポイント。”
}
}
}

このDesign Tokensは、Style DictionaryやTheoなどのツールを用いて、CSSカスタムプロパティ、Sass/Less変数、JavaScriptオブジェクト、Tailwind CSSの設定ファイルなど、様々な形式に変換される。これにより、Figmaで定義したデザインが、コードレベルで一貫性を持って適用されることが保証される。

—

まとめ：Figmaを「開発の起点」に変える

FigmaのInteractive ComponentsとScroll Overflow、そしてDesign Variablesを組み合わせることで、単なる静的なデザインカンプでは決して伝えきれなかった、「生きたインタラクション」をプロトタイプとして表現することが可能になる。これは、デザイナーがより詳細なUXを検証できるだけでなく、開発者にとっても「何をどう実装すべきか」が明確になる、強力なコミュニケーションツールとなる。

今回解説した内容は、Figmaの機能を最大限に引き出し、デザインと開発のシームレスな連携を実現するための「極限の知見」だ。キーボードショートカットで操作を高速化し、神プラグインでワークフローを自動化し、そしてDesign Tokensでデザインシステムをコードに橋渡しする。

これらのテクニックを駆使し、君たちのチームが、ユーザーを真に魅了するプロダクトを、かつてないスピードで生み出すことを切に願う。Figmaは単なるデザインツールではない。それは、デザインと開発の未来を切り拓く、強力な「プロダクトデザインプラットフォーム」なのだ。

さあ、Figmaの真の力を解き放ち、開発の最前線で震えるほどの結果を出してほしい。君たちの挑戦を、心から応援する。

スポンサーリンク
タイトルとURLをコピーしました