Figmaで「実機並み」のUXを錬成せよ：Interactive ComponentsとScroll Overflowの極限実装術
多くのデザイナーやエンジニアがFigmaのプロトタイプを「絵に描いた餅」で終わらせている。画面遷移のリンクを繋ぐだけで満足しているなら、それはプロダクトの魂を殺しているのと同じだ。
真のUI/UXエンジニアにとって、プロトタイプは「意図を伝えるためのドキュメント」ではなく、「開発仕様を定義する実行可能なコード」でなければならない。今日は、FigmaのInteractive ComponentsとScroll Overflowを組み合わせ、実アプリと区別がつかないレベルのモーダル・ドロワーを構築する、血の通った設計術を伝授する。
—
1. なぜ「画面遷移」ではいけないのか：状態管理のパラダイムシフト
従来の画面遷移（Navigate To）によるモーダル実装は、メモリ消費が激しく、遷移の瞬間にスタックがリセットされるため、スクロール位置の保持や背景との連動が破綻する。
我々が目指すのは、「メイン画面を基底状態とした、コンポーネントによる状態遷移（State-Driven UI）」だ。
実装のコア：Scroll Overflowの連動
モーダルの内部が長大なリストである場合、`Scroll Overflow`設定を `Scroll` にしつつ、親コンポーネントを `Clip Content` で制御する。ここで重要なのは、「背景のスクロールを固定しつつ、モーダル内だけを独立して慣性スクロールさせる」というブラウザエンジンの挙動をFigma内で再現することだ。
- Tips: コンポーネントの `Fixed position` を使わず、メイン画面のフレーム内に `Auto Layout` でモーダルコンポーネントを配置し、それを `Overlay` として呼び出す。これにより、スクロールコンテキストの衝突を回避できる。
—
2. 疑似フォーカストラップと背景クリック判定の「隠し味」
実アプリで最もUXを毀損するのは、モーダル開閉時の「閉じる判定」の甘さだ。
閉じる判定の物理的実装
1. Scrim（オーバーレイ背景）の透明コンポーネント:
モーダルの外側に、透明度0%（あるいは薄い黒）のフルスクリーン・コンポーネントを配置する。
2. Interactive Componentsの活用:
`Overlay` の外側に配置した `Scrim` コンポーネントに `On Click` -> `Close Overlay` を仕込む。これで、モーダル本体を触った時は反応せず、背景のみに反応する「擬似フォーカストラップ」が完成する。
—
3. メンテナンス性を爆速化する：コンポーネント構造の設計術
複雑なプロトタイプは、修正のたびにスパゲッティ化する。これを防ぐためのアーキテクチャが「Atomic State Pattern」だ。
推奨構造
- Base Component: 最小単位のボタンやリストアイテム。
- Logical Component: モーダルの中身。`Variant` で「読み込み中」「エラー」「データあり」の状態を保持。
- Container Component: `Overlay` として呼び出される外枠。
【重要】変数とAPIを活用した設計
プロトタイプの複雑化を避けるため、複雑なロジックはFigmaのプロトタイプ機能だけで完結させない。Figma Plugin API を使用し、コンポーネントのバリアント構成をCLIで管理する設計思想を推奨する。
自動構成用CLIスクリプト（Node.js/Figma Plugin API）
以下のスクリプトは、特定の命名規則に従ったコンポーネントから、プロトタイプ用のステート定義を自動生成する雛形だ。
/
- Figmaコンポーネントのステートを自動生成し、
- プロトタイプ接続のミスを排除するためのビルドスクリプト
/
const generatePrototypeLinks = (componentNode) => {
// すべてのバリアントを走査し、トリガー設定を適用
const variants = componentNode.children;
variants.forEach(variant => {
// “Close”バリアントへの遷移を自動設定
if (variant.name.includes(“Active”)) {
variant.setProperties({
trigger: ‘On Click’,
action: ‘Close Overlay’,
animation: ‘Smart Animate’
});
console.log(`[BUILD] Hooked: ${variant.name} -> Close Overlay`);
}
});
};
// 実行: コンポーネントを選択した状態で呼び出す
// これにより、手動接続によるリンク切れを100%撲滅する
—
4. パフォーマンス最適化ハック：メモリを食い尽くさないために
大規模なプロトタイプでFigmaが重くなるのは、不要なインスタンスがメモリに常駐しているからだ。
1. Lazy Loadingの擬似再現: 複雑なモーダルは、メインのファイルから切り離し、`Library` 経由で呼び出す。
2. スマートアニメーションの制限: 全ての要素に `Smart Animate` を適用すると、描画負荷が跳ね上がる。モーダル開閉には `Move In` や `Dissolve` を使い、アニメーションの補間を必要最小限に抑えるのがプロの作法だ。
3. ノードのクリーンアップ: インタラクションを設定した後の「ダミーノード」は、必ず `Plugin` で定期的にクリーニングせよ。
結びに：伝説のエンジニアとして
プロトタイプは「動けばいい」ものではない。それは、コードを書くエンジニアが迷わず実装するための「設計図」であり、ユーザーが製品の未来を予見するための「鏡」である。
Interactive Componentsを使いこなすことは、単なるツールの習熟ではない。UIの中に「状態という名の時間」を埋め込む行為なのだ。この知見を現場に持ち帰り、混沌としたプロジェクトに秩序をもたらしてほしい。
君たちが作るそのピクセルの一つ一つが、プロダクトの寿命を決定づけるのだから。