>

>

How To Make A Monthly/Annual Pricing Toggle In Framer

How To Make A Monthly/Annual Pricing Toggle In Framer

Dec 23, 2023

|

3 min read

|

How To Make A Monthly/Annual Pricing Toggle In Framer
How To Make A Monthly/Annual Pricing Toggle In Framer
How To Make A Monthly/Annual Pricing Toggle In Framer

Introduction


In this tutorial, you’ll learn how to create a monthly/annual pricing toggle in Framer without writing a single line of code.


Interested? Let’s get started!


Psss… If you don’t want to read the whole article, skip to the “Step 5” section and remix the project in your dashboard completely for free.


Step 1: Create Pricing Cards Component


The first step is to create some pricing cards and turn them into a component.


There’s actually not much to say about this step.


Just create some pricing cards and turn them into a component.


This first variant of the component will be our “monthly” option.


Create a set of pricing cards and turn them into a component


Step 2: Create A Toggle


Now that we have a pricing cards component let’s add the toggle.


This is where most people get confused, but it’s actually pretty straightforward.


Just design a toggle and make it look like it’s on the “monthly” option.


It doesn’t have to have the “toggle” functionality right now. It just needs to be designed.


Create a toggle with the "monthly" option selected


Step 3: Create An “Annual” Variant


Right now, we have a component with a single variant that represents our monthly pricing.


The second step is to create a variant of that component for the “annual” option.


To do that, select the variant and click the “+” button on its right side. Framer will automatically create an identical copy of it.


On this new variant, we want to edit two things:

  1. Pricing

  2. Toggle


For the pricing, edit it so it matches your annual payment option.


As for the toggle, here’s what you need to do.


Edit your toggle to make it look like the annual variant is being selected.


It doesn’t matter how you do it; just make it clear which option the user is viewing.


Create a copy of the monthly component and make it look like the annual option


Step 4: Add Interactions


Right now, nothing works.


But we’re almost there, I promise.


What we have to do now is to create a “tap” interaction that will allow the user to switch between the two variants of your pricing component.


Here’s how you do it:

  1. Select the frame that you want to make clickable

  2. On the right-side panel, go to interactions > “+” > new transition

  3. Leave everything as it is and select the destination variant

  4. Do the same but the other way around (the monthly toggle leads to the annual variant and the other way around)


Congratulations! You now have a functioning pricing toggle in Framer.


How to create a tap interaction to make the toggle work


Step 5: Remix The Project (Additional)


If you’ve followed the previous steps, you should already have a working pricing toggle.


However, if something doesn’t work or you are not interested in the guide but want to remix the working project, check out this link.


Conclusion


Thank you so much for having read the whole article.


If you need any assistance with your Framer website, do not hesitate to reach out.


If you’ve found this article helpful, I kindly invite you to share it with a friend who might benefit from it!

Introduction


In this tutorial, you’ll learn how to create a monthly/annual pricing toggle in Framer without writing a single line of code.


Interested? Let’s get started!


Psss… If you don’t want to read the whole article, skip to the “Step 5” section and remix the project in your dashboard completely for free.


Step 1: Create Pricing Cards Component


The first step is to create some pricing cards and turn them into a component.


There’s actually not much to say about this step.


Just create some pricing cards and turn them into a component.


This first variant of the component will be our “monthly” option.


Create a set of pricing cards and turn them into a component


Step 2: Create A Toggle


Now that we have a pricing cards component let’s add the toggle.


This is where most people get confused, but it’s actually pretty straightforward.


Just design a toggle and make it look like it’s on the “monthly” option.


It doesn’t have to have the “toggle” functionality right now. It just needs to be designed.


Create a toggle with the "monthly" option selected


Step 3: Create An “Annual” Variant


Right now, we have a component with a single variant that represents our monthly pricing.


The second step is to create a variant of that component for the “annual” option.


To do that, select the variant and click the “+” button on its right side. Framer will automatically create an identical copy of it.


On this new variant, we want to edit two things:

  1. Pricing

  2. Toggle


For the pricing, edit it so it matches your annual payment option.


As for the toggle, here’s what you need to do.


Edit your toggle to make it look like the annual variant is being selected.


It doesn’t matter how you do it; just make it clear which option the user is viewing.


Create a copy of the monthly component and make it look like the annual option


Step 4: Add Interactions


Right now, nothing works.


But we’re almost there, I promise.


What we have to do now is to create a “tap” interaction that will allow the user to switch between the two variants of your pricing component.


Here’s how you do it:

  1. Select the frame that you want to make clickable

  2. On the right-side panel, go to interactions > “+” > new transition

  3. Leave everything as it is and select the destination variant

  4. Do the same but the other way around (the monthly toggle leads to the annual variant and the other way around)


Congratulations! You now have a functioning pricing toggle in Framer.


How to create a tap interaction to make the toggle work


Step 5: Remix The Project (Additional)


If you’ve followed the previous steps, you should already have a working pricing toggle.


However, if something doesn’t work or you are not interested in the guide but want to remix the working project, check out this link.


Conclusion


Thank you so much for having read the whole article.


If you need any assistance with your Framer website, do not hesitate to reach out.


If you’ve found this article helpful, I kindly invite you to share it with a friend who might benefit from it!

Luca Da Corte

Luca Da Corte is a freelance Framer Expert and SEO specialist. When he’s not working on some exciting projects, he curates a blog where he shares insights, resources, and experiences on everything regarding websites.

Table Of Contents:

Introduction
Step 1: Create Pricing Cards Component
Step 2: Create A Toggle
Step 3: Create An “Annual” Variant
Step 4: Add Interactions
Step 5: Remix The Project (Additional)
Conclusion

Table Of Contents:

Introduction
Step 1: Create Pricing Cards Component
Step 2: Create A Toggle
Step 3: Create An “Annual” Variant
Step 4: Add Interactions
Step 5: Remix The Project (Additional)
Conclusion

Table Of Contents:

Introduction
Step 1: Create Pricing Cards Component
Step 2: Create A Toggle
Step 3: Create An “Annual” Variant
Step 4: Add Interactions
Step 5: Remix The Project (Additional)
Conclusion