How to Build Synced Pricing Cards Using Overrides in Framer

Setting Up the Project

We need a basic project setup with a toggle with two states: Off and On. We'll use overrides to connect these toggles and update the price and toggled state. We select the three toggles and add a new file with a new Override.

Creating Overrides in Framer

There are a few simple steps to set up an override. First, we need a store to keep track of a specific value. In our case, that's a boolean called yearly. When we toggle one of the pricing cards, the value updates, and the price and toggles all go to the right state based on this boolean.

Next, we write a withToggle override that receives a Component from the canvas and returns a React component with the canvas component that was passed in and updated props. In this case, we are just returning the props that we already get from Framer. If we apply this override, it won't do anything yet.

Updating the Variant

To make the override work, we need to set the variant based on the current value in our store and update the value whenever we click our components. We write a logic for setting the right variant and an onClick handler that sets the store to whatever the opposite of its current value is.

We can also update any other property that components have, for example, their text. Whenever we click the component, we can update the text to reflect the yearly or monthly prices.

Building Cool Synced Pricing Cards

With these two techniques, we can build synced pricing cards that animate between two numbers. We can set the number on the canvas as properties; whenever we toggle these, there's a nice transition between the two.

If we want, we can do some fetching and show localized prices for our products while still using the power of animations inside components.

Conclusion

Overrides in Framer are powerful features that allow you to modify and control components at runtime. We've explored how to use overrides to create synced pricing cards that update the price and toggled state whenever you toggle one of the cards. If you want to check out how this is built, click the remix link and open the project to play around.