Figma marketing website metrics sections

A metrics section is three or four large numbers in a row, usually sitting under a hero, above a footer, or partway down an about page. Laying one out takes about ten minutes.

Deciding what belongs in it takes considerably longer, because no amount of layout answers the question underneath. Is the number actually impressive to the person reading it?

Numbers that help and numbers that hurt

Social proof cuts both ways. NN/g's work on social proof in the user experience makes the downside concrete: a count that reads as small does more damage than no count at all, and test participants dismissed content on exactly that basis.

"1,200 users" beside a competitor's "2 million" is an argument against you, published in your own type. If the absolute numbers are small, change the axis. Rates, ratios, and durations hold up at any scale: 99.98% uptime, 4.9 average rating, twelve minutes to first deploy.

And every figure has to survive somebody checking it. Upfront disclosure is one of the four credibility factors NN/g keeps finding, and an unqualified "10x faster" with no definition attached costs more trust than the claim buys.

Anatomy of a metric item

The figure and its label are one sub-component, 384px across in the desktop grid and 343px on mobile, with five types: a small accent line above the number, a small featured icon, centered and left-aligned versions that add a line of supporting text, and a card version at 312px that boxes each metric in its own container.

Keep the label to a noun phrase. "Active teams" works; "We now have active teams using the platform" is a sentence pretending to be a label. Set the figures in tabular numerals where the typeface offers them so a row of numbers lines up instead of jittering, since Figma exposes a font's OpenType features on the text layer.

The supporting text variants earn their place whenever a number needs a unit or a date to mean anything, which is most of the time.

Section layouts, quiet to loud

At the quiet end, the minimal centered text layout is 432px tall on desktop and is nothing but a row of figures. The simple accent line version is 562px and adds a heading and a paragraph above the row.

Above those sit the card layouts in gray light and brand dark, split image versions that set the numbers beside a photograph, image with cards, and two layouts that add buttons underneath for pages where the numbers are the argument for clicking. Several of the layouts also ship in a brand theme, which is the version to reach for when the section needs to read as a statement rather than a footnote.

These are marketing metrics rather than product ones. The dashboard metric cards are a separate component built for data that changes, with charts and trend indicators.

Sections compose into pages

Metrics sections rarely stand alone. They work as the beat between a header section and the first features section, or as the credibility layer next to testimonials and social proof.

The landing page examples and pricing page examples place them exactly there, and because every example is assembled from these components, lifting your metrics row higher up a page takes about as long as dragging it there. Each layout is drawn at 1,440px and 375px in light and dark, and the photographic versions take your own imagery or a placeholder from the free avatar library for the team shots.

In code, the same rows are already built. Untitled UI React metrics sections are open source, built with Tailwind CSS and React Aria, so the numbers reflow the same way in the browser as they do in the file.