The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
I made this Framer custom component pricing card
Most pricing components are fixed. This one recalculates. Visitors pick their run volume, choose which models they want, and switch between monthly and annual. The price updates as they go. Made for SaaS and AI products.
What's included:
→ Slider for usage tiers: 10K, 25K, 100K, 500K runs/mo
→ Per-model toggles, each with its own add-on price
→ A monthly/annual billing switch
→ A "Popular" badge and feature list, both editable in Framer
→ Clean design that's ready to drop into a live site
Good fit for:
→ AI API products
→ SaaS tools that charge by usage
→ Any startup with tiered or modular pricing
Built and tested in Framer. Fully responsive. Easy to connect to your own variables and CMS.
Outstanding
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
That's ironic, I deleted all my work last night to do this and re-optimize.
The Brief Case
Every creative freelancer knows the spiral: How do I price this? Am I charging enough? What even is a profit margin? Pricing is one of the biggest bottlenecks in a freelancer's business — and it shouldn't be.
The Brief Case is a 3-step tool built entirely in Figma Make that takes a designer from zero to a client-ready proposal in under 5 minutes.
Step 1 — Know your number
An hourly rate calculator built on your real financial data: personal expenses, business costs, desired salary, and billable hours. No more guessing.
Step 2 — Build your project
A brief generator that structures your scope: deliverables, revision rounds, rush fees, contractor costs, installments, and timeline — all feeding into your pricing automatically.
Step 3 — Send with confidence
A clean, personalized, client-facing proposal with an interactive timeline and payment schedule built in. Profit margin stays private. Only the right numbers reach the client.
Workflow:
Built using Figma Make with iterative prompting, design system styles pulled from an existing Figma file, and a multi-step UI flow connecting all three stages.
Link to prototype: https://www.figma.com/make/jtTrwFYRlBkXln1IUzdMHo/Proposal-Generator?fullscreen=1&t=tIiRVlNWHjwjHJER-1&code-node-id=0-9
Pricing should be empowering. Not vomit-inducing.
Cool
We’ve been designing and developing Framer websites for startups and growing teams, creating experiences that combine great design, performance, and usability.
We’re proud to share that we’re now officially recognized as Framer Experts on Contra
This milestone reflects our commitment to delivering high-quality digital experiences, and we look forward to helping more ambitious teams bring their ideas to life
Congrats on the Framer Experts recognition. That badge carries real weight for clients who are specifically looking for someone who lives in that tool.
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?