Figma metric components

Almost every dashboard opens the same way: a row of three to five big numbers across the top, before any chart gets a look in. That row is the part people actually read. They scan it, decide whether anything is wrong, and only then look further down the page.

Metric cards also show up well outside dashboards, in billing summaries, campaign reports, project overviews, and the header of a settings page. The 4 components and 36 variants above cover the card layouts, the mini charts, and the change indicators that go inside them.

Three things a card has to say

The value, the direction it moved, and what it moved against. The third one gets dropped constantly. A card reading "$47,290" with a green "+12%" underneath tells you nothing until it says compared to what: last week, last month, the same month last year.

Twelve percent up on a bad January is a different story from twelve percent up on a record December. Every trend delta needs its comparison period attached in text, and that is a copy decision your components should force rather than leave optional.

The other half of a good top row is restraint. Three to five cards, chosen because someone checks them daily, is a row; nine cards weighted equally is a wall, and the dashboard examples are laid out on that assumption.

Nine card types, desktop and mobile

The Type property runs Simple, four icon layouts from Icon 01 to Icon 04, and four chart layouts from Chart 01 to Chart 04, which covers a plain number, a number with an icon, and a number with a sparkline built into the card.

Actions toggles a button row onto the bottom of the card for the cases where a metric is also a link into a report. Breakpoint gives you a 388px desktop card and a 343px mobile card, and the simple desktop card is 106px tall, which is the number to build your grid rhythm around.

Do not confuse these with the metrics sections, which are the stat rows built for marketing pages; those are designed to impress, these are designed to be checked.

The sparkline and the delta move together

The mini chart is its own component set, 56px tall and 112px wide for most of its curves, with twelve styles across Realistic 01 to 03, Wavy 01 to 07, Straight, and Layers, and each one exists in a positive and a negative trend.

The change indicator comes in three styles, also in positive and negative. So flipping a card from good news to bad news is a couple of variant swaps and the sparkline never ends up climbing while the arrow points down, which is the sort of detail that survives right up until someone screenshots the mockup for a board deck.

Keep the arrow doing the work and let color reinforce it: MDN's guidance on color and luminance is blunt that hue alone should never carry a distinction, and red-versus-green deltas are the textbook example.

Assembling the row

The mini charts and change indicators live as their own component sets, which is what lets you change the curve or the delta style inside a card without touching the card, and Figma's component properties put the toggles and text fields in one panel instead of five nested layers. Every card exists in a light and a dark version. For the full-size charts that sit under the row, the line and bar charts use the same styles and spacing.

When it is time to build, the same cards exist in code. Untitled UI React metrics are open source, built with Tailwind CSS and React Aria, matching these components down to the positive and negative trend treatments.