By following this guide, you will design and structure a SaaS pricing page that increases plan selection rates, reduces drop-off, and builds the trust visitors need to click "Buy." Expect to spend two to three focused hours working through each section, whether you are designing from scratch in Figma or reworking an existing page.

What You'll Build

  • A three-tier pricing layout with a clearly highlighted recommended plan
  • An annual/monthly billing toggle that reinforces savings without hiding costs
  • A feature comparison table that makes upgrade decisions obvious
  • A trust section with social proof, security signals, and a FAQ block
  • A mobile-first responsive layout that works at every breakpoint

Prerequisites

  • Figma (free or paid) or your preferred design tool
  • Access to your product's feature list and pricing tiers
  • Basic familiarity with component-based design
  • At least one round of customer interviews or survey data about buyer objections

Step 1: Audit Your Current Pricing Assumptions

Before you open Figma, question every assumption baked into your existing pricing page. Most SaaS teams set prices internally and then design around them. Buyers do not think in your internal logic.

What data should you collect first?

Pull your heatmap data from Hotjar or Microsoft Clarity. Look at where visitors stop scrolling and where they click before leaving. Pair that with session recordings to spot hesitation patterns. If you have a pricing page already live, check your GA4 funnel report to see where drop-off happens between the pricing page and the checkout step.

Write down the three most common objections your sales or support team hears about pricing. You will design against each one directly.

Common pitfall: Skipping this step and designing a page that looks polished but does not address real buyer friction. A beautiful page that ignores the wrong question loses just as many conversions as an ugly one.

Step 2: Choose the Right Number of Plans

Research from pricing consultants and SaaS growth teams consistently shows three plans as the optimal number. Fewer than three reduces perceived choice. More than four triggers decision paralysis, which is a well-documented barrier in e-commerce and SaaS alike.

How do you name your plans without sounding generic?

Avoid Starter, Pro, and Enterprise if your competitors already use those words. Name plans after the type of customer they serve. A project management tool might use Solo, Team, and Studio. A marketing platform might use Essentials, Growth, and Scale. Names that reflect identity convert better than names that reflect feature volume.

Set your middle plan as the anchor. This is the plan you want most visitors to choose. You will design the page to make it feel like the obvious pick.

Pro tip: If you genuinely offer an enterprise tier with custom pricing, keep it on the page. Show a "Talk to Sales" CTA in that column. Removing it forces enterprise prospects to search for contact details, and many do not bother.

Step 3: Design the Pricing Card Layout

Open a new Figma frame at 1440px wide. Create three card components side by side with equal width columns and a consistent gap of 24px between them.

Use a filled background card for your middle (anchor) plan. Keep the other two as outlined or lightly shaded cards. Add a label above the recommended card that reads "Most Popular" or "Best Value." Position this label as a small pill or badge above the card border, not inside it. This approach draws the eye without feeling manipulative.

Apply your primary brand colour to the recommended card's CTA button. Use a neutral button style on the other two. The colour contrast alone will direct attention without needing additional visual weight.

Follow WCAG 2.2 contrast guidelines throughout. Your recommended card's background must maintain at least 4.5:1 contrast ratio for all text on top of it. Use the Figma plugin Contrast or the built-in accessibility checker to verify before handoff.

What information goes inside each card?

Use this content order inside every card, top to bottom:

  1. Plan name
  2. One-sentence plan description (who it is for)
  3. Price (large, clear, dominant)
  4. Billing cadence note (per user/month, billed annually)
  5. Primary CTA button
  6. Top five to six feature highlights as a bulleted list

Do not put more than six features inside the card itself. The comparison table below the cards handles the full feature breakdown.

Step 4: Add the Billing Toggle

A billing toggle lets visitors switch between monthly and annual pricing. Annual plans typically offer a 15 to 20 percent discount. The toggle makes that saving visible without burying it in fine print.

Where should the toggle sit on the page?

Place the toggle above the pricing cards, centred, and close to the section heading. Use a pill toggle with two states: Monthly and Annual. Display an inline badge next to the Annual label that reads something like "Save 20%" in your accent colour.

In Figma, build the toggle as an interactive component with two variants. When you hand off to developers, note that the active state should update the price displayed in each card via a simple JavaScript state toggle. There is no need for a full page reload.

Common pitfall: Defaulting to the annual view on page load. Most SaaS growth teams recommend defaulting to monthly. Annual pricing as the default can make your product appear more expensive on first glance, which increases immediate bounce.

Step 5: Build the Feature Comparison Table

Below the pricing cards, add a full comparison table. This section serves visitors who need to validate their decision before committing. It also supports buyers comparing you against a competitor.

How do you structure the table without overwhelming visitors?

Group features into categories using collapsible rows or clear category headings. Common groupings include Core Features, Collaboration, Integrations, Support, and Security. Use a checkmark icon for included features and a dash or empty cell for excluded ones. Avoid putting specific limits (like "5 users") in the same cell as a checkmark. Use a separate row for limits.

Sticky the plan name column headers at the top of the table as visitors scroll. This is a small interaction detail that prevents disorientation on long comparison tables. Flag it in your Figma annotation layer so the development team implements it as a CSS sticky header.

If your audience includes buyers in Australia or Canada who are evaluating enterprise plans, include a dedicated Security and Compliance row group. SOC 2, GDPR, and data residency options matter significantly to procurement teams in regulated industries.

Step 6: Design the Trust Section

Trust signals placed near or below pricing cards directly increase conversion rates. A study by Baymard Institute found that security badges and social proof near CTAs reduce checkout abandonment across e-commerce and SaaS checkout flows. The same principle applies to pricing page decisions.

What trust signals work best on a pricing page?

Use a combination of these four elements:

  • Customer logos: Show five to eight recognisable brand logos. If your customer base is regional, include at least one or two brands your target market will recognise.
  • Short testimonials: Use two to three quotes from customers who mention specific outcomes. "We saved 8 hours per week" outperforms "Great product, highly recommend."
  • Security badges: Display SSL, SOC 2, or GDPR compliance marks. If you offer a money-back guarantee, make it a visual badge, not a line of body text.
  • Review platform ratings: Show your G2 or Capterra rating if it is 4.5 or above. Use the official badge assets from each platform, as they carry more credibility than a manually designed star rating.

If you are working through broader brand positioning alongside this project, a tool like the free brand health score from Lenka Studio can help you identify where trust gaps exist before you finalise your design.

Step 7: Write and Place the Pricing FAQ

A FAQ section on a pricing page does more than answer questions. It reduces the need for a prospect to contact support before purchasing, which shortens the sales cycle.

Which questions should you include?

Pull directly from your objection list in Step 1. Common high-performing pricing FAQ topics include:

  • Can I switch plans later?
  • What happens when my trial ends?
  • Do you offer refunds?
  • Is there a free plan or a free trial?
  • How does per-seat billing work?
  • What payment methods do you accept?

Write answers in plain language. Keep each answer under three sentences. Use an accordion component so the page does not become overwhelming. In Figma, build this as an auto-layout component with open and closed state variants.

Pro tip: Mark your most clicked FAQ item with an open state by default. Heatmap data will tell you which question visitors look for first.

Step 8: Optimise for Mobile

Over 40 percent of SaaS pricing page visits come from mobile devices, particularly from LinkedIn and email ad traffic. A pricing page that stacks poorly on mobile loses a real portion of qualified prospects.

How should the card layout change on mobile?

Stack the pricing cards vertically. Reorder them so the recommended (middle) plan appears first. Collapse the full comparison table behind a "See full comparison" expand button. Mobile visitors rarely need the full table. They need the price, the key features, and the CTA.

Set your Figma frames at 390px wide for the primary mobile breakpoint, matching the iPhone 15 viewport. Test at 360px as well to cover the most common Android screen widths used in Singapore and Southeast Asian markets.

Step 9: Prepare the Design Handoff

Before handing off to your developer, run through this checklist inside Figma:

  • All components use auto-layout with no fixed absolute positions
  • Spacing uses a consistent 4px or 8px base grid
  • Typography styles are applied via text styles, not manual overrides
  • Colour tokens are named and match your design system variables
  • Interactive states (hover, active, focus) are included for all buttons and toggles
  • Accessibility annotations are added for ARIA labels on toggle and FAQ accordion

At Lenka Studio, we annotate Figma files with developer notes directly on the canvas using the FigJam widget or sticky note components placed in a dedicated "Dev Notes" layer. This saves at least one round of back-and-forth during implementation.

Frequently Asked Questions

How many pricing tiers should a SaaS product have?

Three tiers is the standard that converts best for most SaaS products. It gives buyers enough choice to self-select without triggering decision fatigue. If you offer a custom enterprise option, add it as a fourth column with a sales CTA rather than a fixed price.

Should the annual plan be selected by default on the toggle?

No. Default to monthly pricing on page load. Annual pricing shown first can make your product appear more expensive than it is, which increases immediate bounce rates before visitors read the discount details.

Does a pricing page FAQ actually improve conversions?

Yes. Removing pre-purchase objections on the page reduces reliance on live chat or sales outreach before a decision is made. Shorter decision paths produce higher conversion rates, particularly for self-serve SaaS products under $100 per month.

How is this different from a standard landing page design?

A pricing page carries purchase intent. Visitors are already past the awareness stage. The design goal shifts from generating curiosity to reducing friction. Every element should remove a reason not to buy, rather than explain why the product exists.

What if my product has complex, usage-based pricing?

Show a simplified estimate calculator rather than a flat price card. Let visitors enter their expected usage and display a projected monthly cost. This approach works well for API products, infrastructure tools, and platforms where volume drives cost. Pair the calculator with a "Talk to Sales" CTA for larger estimates.

Next Steps

Start with Step 1 this week. Pull your heatmap data and write down your top three buyer objections before you open a single design tool. The page you design against real data will outperform the page you design from assumptions every time.

If you want a second opinion on your pricing page structure or need help moving from a Figma prototype to a production-ready page, the team at Lenka Studio works with SaaS businesses across Australia, Singapore, Canada, and the US. Get in touch and we can review what you have built.