2025 · case study
Figma Dashboard
A Figma admin design rebuilt in Angular, close enough that you have to look twice.
01 Overview
Angular 18 standalone components recreating a Figma admin dashboard — sidebar, breadcrumb header, stat cards, line and donut charts, data table and an activity panel, matched on colour, spacing and type.
02 The problem
The brief was a single Figma frame and a deadline: rebuild it in Angular, pixel-accurate, with a structure that would survive real data later.
03 What I built
Broke the frame into standalone components — sidebar, header, stat cards, chart sections, table, right panel — matched the Inter type scale and spacing, and wired Chart.js for the line and donut visualisations. All content comes from mock data shaped like a future API response.
04 Key features
Sidebar with section labels, active states and submenus Header with breadcrumbs and a search field with shortcut hint Stat cards for orders, sales, profit and growth with trend indicators Line chart (this year vs last) and a spendings donut Traffic-by-source progress bars Product status table with custom badge styling Right panel: notifications, activity, contacts Responsive — side panels collapse on smaller screens
05 Technologies
- Angular
- TypeScript
- Standalone components
- Bootstrap
- Charts & data viz
- Responsive design
- Figma to code
06 Engineering decisions
Component boundaries first
Every visually distinct block became its own standalone component before any styling. That made the pixel work parallelisable and the result easy to reason about.
Mock data shaped like an API
Card values and table rows live in typed arrays in the component files, structured the way a real endpoint would return them — so swapping in HttpClient is a change of source, not a rewrite.
Matching, not eyeballing
Pulled the exact hex values, spacing steps and font sizes from the design rather than approximating, which is what makes a recreation hold up next to the original.
07 What I took from it
- Pixel-accuracy is mostly discipline about tokens — colour, spacing, type — not clever CSS.
- Structuring mock data like the real API keeps "make it look right" and "make it work" from fighting each other.