Figma: Multi-tier Pricing Page with Billing Toggle and Feature Comparison Table
A long-scroll pricing page anchored by four side-by-side plan columns (Starter, Professional, Organization, Enterprise) with monthly/annual billing toggles and per-seat-type pricing, followed by an add-ons section, an exhaustive collapsible feature-comparison matrix using green check dots across tiers, and an expandable FAQ accordion. Visual hierarchy relies on a large bold headline, generous whitespace, and a soft mint-green accent that ties the hero, FAQ band, and CTAs together against an otherwise neutral light layout.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/figma-multi-tier-pricing-page-with-billing-toggle-and-feature-comparison-table.
Palette
Fonts
Page types
UX patterns
UI elements
Context
More from Figma
- Feature — Add-ons: AI credits and Governance+
- Comparison — Compare all features matrix with green check dots
- Footer — Deep-black mega footer with multi-column product links
- Design Tool Marketing Homepage with Full-Width Hero and Customer Logos
- Pricing / Plans — Four-tier seat pricing cards with monthly/annual toggle and Config banner
- FAQ — Pricing FAQs on pale-green band
- Hero — Pricing hero with bold two-line headline
- Logo Wall — Trusted-by grayscale logo strip