Starting at the Atomic Level

Framer allows for the creation of fully interactive and animated components, including the nesting of components within others. In this guide, we'll build a navigation bar component for a website, featuring two types of nested components with unique interactions. Our project will include a Navigation Bar with five Nav Items and one Shopping Cart component. The design of these nested components will influence the overall navigation bar design. Therefore, it's optimal to start with the 'deepest' nested component and build up from there.

Nesting Components

Once our two components are ready, we can create the component to nest them. Draw your navigation bar, select it on the canvas, and click the Component tool in the Toolbar. To nest a different component, drag it to the Component Canvas and place it within your designed navigation bar.

Triggering Interactions from the Navigation Bar

On the main canvas, we want to enable tapping 'Clothing' to navigate to a new screen. Using the Prototyping Connector to link the component to a new screen would trigger an interaction anywhere within the component, which is not desirable. We want the transition to trigger from a specific element. This is where Event Variables come into play. Event Variables are unique in that they are attached to events rather than properties (like opacity or fill), allowing for precise interaction control.