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-tab-component 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.