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.

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.

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.

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.

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!