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.