Figma pricing page examples

The pricing page is where interest becomes intent. Visitors arrive with one question and a card in their metaphorical hand, and the page either answers cleanly or leaks them to a competitor's tab.

It's also the page teams argue about most and design last, which is backwards given how much revenue rides on it. The pricing page examples above are built around that moment, and the patterns they use are worth understanding before you customize one.

Show the price

The most common pricing page mistake is not showing prices. Nielsen Norman Group's research is unambiguous: price is the single piece of information users most want, and hiding it behind "Contact sales" reads as either "expensive" or "annoying", usually both.

Even B2B products win by publishing a starting price with an enterprise tier alongside. These examples assume you'll show real numbers, because the page converts on trust before it converts on features.

If a price genuinely depends on scale, publish the entry point and let an enterprise card carry the conversation to sales.

The anatomy of a pricing page

The recurring parts: tier cards with a name, price, feature list, and CTA; a highlighted recommended plan; a billing toggle for monthly and annual; an FAQ section for the objections you already know are coming; social proof; and a closing CTA. The examples assemble these from Untitled UI's pricing sections, FAQ sections, CTA sections, and testimonials, so restructuring a page is section shuffling, not redrawing.

Highlighting one plan matters more than most teams expect: an emphasized middle tier gives undecided buyers a default, and undecided buyers are most of them.

The FAQ section is quietly the second-hardest-working part of the page. Billing questions, cancellation policy, and "what counts as a user" are the objections that stall checkouts, and answering them on the page beats answering them in support tickets.

Comparison without confusion

Feature comparison tables are where pricing pages go to die. NN/g's comparison table research caps the useful width at about five plans, and past that users stop comparing and start guessing. On mobile the table needs an actual strategy, stacked cards or a tab per plan, because a ten-column table pinched onto a phone helps nobody. Smashing Magazine's pricing UX guide covers those mobile patterns well, and the mobile versions of these examples already make those calls.

Desktop, mobile, light, and dark

Every example ships as a 1,440px desktop page and a designed 375px mobile version, in light and dark mode. Since the pages run on Untitled UI's shared styles and tokens, they rebrand with your palette in minutes, and the tier cards inherit your changes everywhere at once instead of drifting apart card by card.

Testing your own tier names and real feature lists early is worth it, because pricing pages are where realistic content exposes layout problems fastest, usually in the longest feature bullet.

When it's time to build, the same pages exist in code. Untitled UI React pricing pages are open source, built with Tailwind CSS from the same sections, so the pricing page that survived all your stakeholder reviews is the one that ships.