ナビゲーションは任意のデジタルインターフェース内で重要です。スマートコンポーネントを使用すると、カスタムインタラクティブナビゲーションコンポーネントを作成し、これをプロトタイプの残りの部分と完璧に連携させることができます。 このガイドでは、コンポーネントのネストの概念、イベント変数を使用してコンポーネント内の要素にイベントを追加し、これらをコンポーネントに渡す方法について説明します。 ネストされたコンポーネントを使用する主な利点の1つは、別のコンポーネント内の要素の一意のホバーステートなど、その状態に完全に制御できることです。

原子レベルから始める

Framerを使用すると、完全にインタラクティブでアニメーション化されたコンポーネントを作成し、他のコンポーネント内にコンポーネントをネストすることさえできます。 ウェブサイトのナビゲーションバーコンポーネントを構築しており、独自のユニークな相互作用を持つ2種類のネストされたコンポーネントを含むプロジェクトを作成しています。私たちのプロジェクトには、さまざまなネストされたコンポーネント、つまり5つのNavアイテムと1つのショッピングカートコンポーネントを含むナビゲーションバーが含まれます。 ネストされたコンポーネント、ナビゲーションリストアイテム、およびショッピングカートのデザインは、ナビゲーションバーの設計方法に影響を与えます。 このため、最適なワークフローには、「最も深い」ネストされたコンポーネントから始めて、そこから構築することが含まれます。

コンポーネントのネスト

これら2つのコンポーネントが準備できたら、これらをネストするコンポーネントを作成できます。 ナビゲーションバーを描画し、キャンバス上で選択し、ツールバーのコンポーネントツールをクリックします。 新しいコンポーネントに別のコンポーネントをネストするには、単に別のコンポーネントをコンポーネントキャンバスにドラッグし、設計したナビゲーションバー内に配置します。

ナビゲーションバーからの相互作用のトリガー

メインキャンバスに戻り、「衣類」をタップして完全に新しい画面に移動できるようにしたいと思います。 プロトタイピングコネクタを使用してコンポーネントを新しい画面に接続し、インタラクションを設定できます。 ただし、これはコンポーネント内のどこをタップしてもトリガーされるため、これは私たちがやりたいことではありません。 この場合、イベント変数が役立ちます。 これは、プロパティ（不透明度や塗りつぶしなど）にアタッチされていない特別なタイプの変数であり、代わりにイベントにアタッチされます。