The pricing page is where interest becomes revenue. A poorly designed Figma pricing table can kill a great product. This guide covers 10 proven patterns — with notes on which converts best and why — so you can choose the right one for your specific situation.
Pattern 1: The Three-Column Plan Grid
The default SaaS pricing layout. Three plans side-by-side (Starter / Pro / Enterprise), the middle plan visually highlighted as “Most Popular.” Each column shows a price, a list of included features, and a CTA button. This pattern works because it gives users a clear comparison and guides them toward the middle option through anchoring.
In Figma: use an auto layout row of three equal-width cards. The highlighted card gets a foreground background and a raised shadow to make it visually dominant.
Pattern 2: The Toggle (Monthly / Annual)
A toggle switch above the pricing cards that swaps between monthly and annual pricing. Annual pricing typically shows a savings percentage (“Save 20%”) to incentivise the longer commitment. Design both states as component variants in Figma — this is one component you'll definitely build with interactive component prototyping.
Pattern 3: The Feature Comparison Table
A detailed table below the plan cards showing which features are included in each plan. Checkmarks for included, dashes for excluded, brief labels for limited features (“Up to 5 projects”). Effective for complex products with many differentiating features. Grouping features into categories (Core, Advanced, Enterprise) makes long tables scannable.
Pattern 4: The Single-Plan Lifetime Layout
For products with a single offering — particularly common for one-time-purchase tools. One large, prominent card with a clear price, a comprehensive feature list, and a strong CTA. The “No subscription” or “Pay once, use forever” message is the headline. Social proof (star ratings, testimonial count) sits just below the price.
This is the pattern for lifetime access tools — relevant if you're evaluating a Figma components lifetime deal.
Pattern 5: The Per-Seat / Per-User Pricing
An input or slider that adjusts the price based on team size. Common for B2B SaaS tools. In Figma, design the component with a visible user count and a calculated monthly total. Show a “per user/month” breakdown clearly.
Pattern 6: The Usage-Based Pricing Display
For API tools, infrastructure products, or anything metered — pricing based on units consumed. Present a calculator widget that shows estimated cost at different usage levels. Design three usage tiers as examples to anchor expectations.
Pattern 7: The Free Tier Highlight
When you have a free tier, make it prominent — not hidden. Users who see the free option convert better to paid because they actually sign up. A dedicated free plan card (greyed out or lighter styling) before the paid plans communicates openness and reduces friction.
Pattern 8: The Enterprise CTA
A “Contact Sales” card as the rightmost plan. No price shown — custom pricing. This pattern signals that the product scales to enterprise, even if most customers never use it. It also makes the middle tier look more accessible by comparison.
Pattern 9: The ROI Calculator Integration
A calculator above or near the pricing cards that shows potential time or money saved. “If you design 3 components per week and each takes 45 minutes, that's 117 hours/year — worth far more than $49.” Effective for productivity tools where the value proposition is time savings.
Pattern 10: The Social Proof Pricing Page
Testimonials embedded directly in or below the pricing section — not on a separate page. The testimonials are specifically about the pricing (“Best $49 I spent on design tools”) or the value proposition. This pattern reduces the hesitation at the conversion moment.
The One Pattern That Converts Best
For most SaaS products: Pattern 1 + 2 + 10 combined. Three-column grid with a monthly/annual toggle and testimonials below. This trifecta covers the three main objections — “which plan?” (grid), “how much for longer?” (toggle), and “can I trust this?” (testimonials).
Browse ready-to-copy Figma pricing table components that implement several of these patterns. See also the full SaaS landing page guide for context on where the pricing section fits in the larger page flow.