Figma dashboard examples

Dashboards are where product design gets hard. A marketing page can hide behind big type and white space. A dashboard has to present dense, live data to someone who checks it every day and needs answers in seconds.

The dashboard examples above are built from the same components, styles, and design tokens as the rest of Untitled UI, and every one comes in light and dark mode with matching desktop and mobile versions. Drop one into your project, swap the charts and metrics for your own, and you're shipping something that looks like a mature SaaS product from day one.

The anatomy of a well-designed dashboard

Almost every good dashboard is assembled from the same building blocks: a sidebar navigation or header navigation, a page header with a title and key actions, a row of metric cards for headline KPIs, a grid of charts, and usually a data table or activity feed underneath.

What separates a polished dashboard from a cluttered one isn't the components. It's the hierarchy. Lead with the three to five numbers your users actually care about, give your charts room to breathe, and push secondary detail behind tabs, filters, or drill-downs rather than cramming everything above the fold.

Every example in this set follows that structure, so you can mix sections between dashboards. Take the metrics row from one and the chart grid from another, and the spacing and type styles stay consistent.

Choosing the right charts for your data

Figma has no native charting tools, which is why every chart in these dashboards is a real, editable component: line and bar charts, pie charts, radar charts, and activity gauges, all built with Auto Layout and ready to restyle.

Line charts suit trends over time, bar charts suit comparisons between categories, and pie or donut charts only earn their place when a handful of parts genuinely sum to a whole. Research from Nielsen Norman Group shows people read length and position far faster than they read areas or angles, so when in doubt, a boring bar chart beats a clever circular one.

And never let color be the only thing separating two data series. WCAG 1.4.1 exists because a meaningful share of your users won't see the difference, so label lines directly or vary the marker shapes as well.

Making dashboards responsive with Auto Layout

The most common question we see from designers building dashboards is what size to design at. Start at 1,440px, which is Figma's default desktop frame and the width every desktop example in this set is designed at. Then check your layout at 1,280px and 1,024px, because dashboards spend most of their life on cramped laptop screens rather than the big monitors we design on.

Each dashboard here also includes a 375px mobile version, so you're not left guessing how a metrics row or chart grid should collapse on a phone.

Responsiveness is where Auto Layout earns its keep. These examples are built with 100% Auto Layout, which means you can resize a dashboard and watch it reflow instead of manually nudging every card. Add a fourth metric card and the row makes room for it.

Designing dashboards for dark mode

Every dashboard in this set ships in both light and dark mode, designed as proper pairs rather than one version with its colors inverted. Dark dashboards need that care. Thin 1px chart strokes and saturated fills that look crisp on white can vibrate or disappear on dark surfaces, so the dark versions are tuned for dark surfaces specifically.

And because colors are applied through Untitled UI's color styles and design tokens, rebranding a dashboard to your product's palette means updating a handful of styles rather than hunting down hundreds of hardcoded fills.

When it's time to build, the same dashboards exist in code. Untitled UI React includes open-source dashboard examples built with Tailwind CSS and React Aria, using the same design tokens as the Figma kit, so what your team ships actually matches what you designed.