One source
of truth
Biffa
Designers were spending half a day recreating pages from scratch just to make an edit.
Biffa's digital estate was fragmented. An existing component library covered only the marketing pages, leaving the ecommerce journey and logged-in experience entirely separate, held in different codebases with different components. Working from inherited files from a previous agency, there was no single source of truth and the brand was inconsistent across the site.
A unified design system, built properly from the ground up and connected directly to the development codebase, would eliminate the reinvention problem and align the team on a single visual language. This wasn't a brief that came to us. It was one I identified, pushed for, and eventually won time from the client to deliver.
I built the design system from scratch, leading the project across three to four sprints while working at around 50% capacity alongside other delivery. A senior product designer supported the build under my direction.
The foundation was a tokens file developed in close collaboration with the development team. We were deliberate about naming, using language both designers and developers could understand, and structuring token names so the developers' AI script could interpret exactly what to use and where. The tokens were organised into theme and responsive collections, built using Figma Agents. When a token changes in Figma, the next time developers run the script it updates in code automatically. A second script does the same for components, which are built on top of the tokens file.
One of the more interesting problems we solved was around icons. The project used a library of over 3,000 icons, far too many for CMS authors to navigate. I built a Figma skill that identifies only the icons actively used across components and compiles them into a filtered list. The developers' script pulls from that list rather than the full library, keeping the icon set lean and purposeful. We also created a pages file that replicates every live page of the site, so designers can pull components and edit pages without ever recreating them from scratch.
A system built once, maintained in one place, and felt across every part of Biffa's digital estate.
