Nested Components in Framer (Beginner Tutorial)

In this Framer Beginner Tutorial we're creating nested components to achieve next level stuff in Framer.

🔴 Working File: https://timgabe.com/resources/nested-...

Timecodes
0:00 - Introduction to the tutorial on creating nested components in Framer.
0:17 - Explaining the purpose of combining components.
0:53 - Starting the recreation of the tab component.
1:58 - Creating a hover state for the tab component.
2:59 - Initiating the image component creation.
3:50 - Adding a hover effect to the image component.
4:46 - Adjusting the shine effect on the image component.
6:10 - Recap of the components created: tab and image.
6:17 - Beginning the creation of the nested component.
7:49 - Recreating the tabs for the nested component.
9:01 - Adding shadows and adjusting the nested component's appearance.
10:03 - Creating the text field for the nested component.
11:50 - Duplicating and adjusting text fields for different tabs.
13:20 - Finalizing the nested component and creating variants.
13:45 - Adjusting the tabs for the nested component.
14:30 - Modifying the padding and radius of tabs.
15:01 - Setting up interactions between tabs and variants.
15:49 - Customizing the appearance for different tab states.
16:59 - Adjusting the image component within variants.
17:41 - Aligning the text with the corresponding tab.
18:00 - Wrapping text stacks into another stack for better control.
18:46 - Adjusting opacity for text stacks in different states.
19:22 - Final touches on the opacity settings for text variants.
19:53 - Demonstrating the final interactive nested component with tab selection.