Figaroo - Web Development and Frontend Design

Figaroo is a real-time design-system playground — a browser-based platform for visualising and customising UI components live across multiple design systems. Built with React and TypeScript, it transforms component libraries into an interactive environment that developers and designers can explore, test, and compare in real time.

Design systems are powerful but often difficult to explore. Components are typically scattered across codebases, documentation, or isolated examples, making it time-consuming to understand behavior, variants, responsiveness, and consistency across systems. The goal was to create a single platform where components could render live, be customised instantly, and adapt across screen sizes.

A React and TypeScript application rendering UI components in real time

Live configuration controls with instant component updates

Support for multiple design systems within a unified interface

Responsive previews across desktop, tablet, and mobile breakpoints

Dynamic component rendering architecture for scalable library support

State management and interaction handling for complex UI customisation workflows

React, TypeScript, Next.js, Tailwind CSS, Zustand, Node.js, PostgreSQL, Supabase, and Vercel.

Figaroo transforms static component libraries into an interactive playground where teams can visualise, customise, and compare UI components directly in the browser, reducing design-development friction and accelerating product workflows.