Figmaでハンガーメニューのボタンから任意の位置に遷移するプロトタイプの作り方

Figmaでハンガーメニューを作成し、ボタンからフレーム1の任意の位置まで遷移する動作を実現したい場合、プロトタイプの設定が重要です。特に、フレーム2（ハンガーメニュー）内のボタンから、フレーム1の特定の位置に遷移するような動作は少し工夫が必要です。この記事では、その方法を詳しく解説します。

Figmaのプロトタイプ機能とは？

Figmaは、デザインだけでなく、インタラクションや動作を設定するためのプロトタイプ機能も提供しています。この機能を活用すると、クリックやタップ、スクロールなどのアクションに応じて、フレーム間の遷移をシミュレーションできます。

しかし、時には標準的な遷移ではうまく動作しないことがあり、特に複雑な動作（例：メニューを開いた後に任意の位置に移動する）を設定する場合には少し工夫が必要です。

まず、Figmaでの基本的なフレーム間遷移の設定方法を確認しましょう。フレーム1（仮のヘッダー）に≡ボタンを配置し、そのボタンがクリックされたときにフレーム2（ハンガーメニュー）を表示するように設定します。

フレーム1で≡ボタンを選択し、右側のプロトタイプタブで「遷移」を設定します。「フレーム2」を遷移先として指定し、アクションを「クリック」に設定、遷移方法は「スライド」などを選びます。これでフレーム1からフレーム2への基本的な遷移が完了します。

次に、フレーム2内のボタンをクリックした際に、フレーム1の特定の位置に遷移する方法です。Figmaの標準的なプロトタイプ機能では、フレーム1全体が選択されてしまうため、特定の位置に遷移することができません。しかし、以下の方法で解決できます。

1. オーバーレイを使用する: フレーム2内のボタンをクリックした際に、フレーム1の任意の位置をオーバーレイとして表示する方法です。これにより、フレーム1全体を遷移するのではなく、特定のエリアにオーバーレイで情報を表示できます。
2. スクロールアクションを使う: フレーム1内でスクロール可能なエリアを作成し、フレーム2のボタンからスクロール位置を指定することで、特定の位置までスクロールさせることができます。