#3 Building Dynamic Pricing Card Toggles — Mastering Framer Code Overrides
In this step-by-step tutorial, we cover everything from creating overrides to handle period toggling, displaying pricing tiers, and dynamically updating components based on user interactions. Additionally, we dive into handling a separate UI element, such as the view toggle, and explore how to style and apply code overrides to achieve the desired functionality.
Starter File: https://framer.com/projects/new?dupli...
Finished File: https://framer.com/projects/new?dupli...
Companion File: https://www.figma.com/community/file/...
0:00 - Introduction and overview of overrides
0:14 - Creating a new pricing override file
0:34 - Adding override for toggling the period
1:04 - Adding overrides for each pricing tier
1:27 - Adding override for displaying the period
3:01 - Applying overrides to pricing component
3:39 - Building the store and setting the default period
4:06 - Implementing the toggle period override
7:02 - Displaying the period in the pricing component
8:01 - Adding prices for each tier to the store
8:47 - Using overrides to display prices dynamically
10:13 - Implementing overrides for toggling between grid and list view
11:02 - Styling icons based on the active state
🌞 Try Framer for free: https://framer.com
🎉 Follow on Twitter: / framer
💎 Join Community: https://www.framer.community