Multi-Brand Figma Design System
A new multi-themed, tokenised, accessible design system
To simplify design across our four main brands— Virgin Media, O2, Priority, and VMO2—I created a new, unified design system in Figma. It was structured around design tokens and variables, enabling easy switching between brand styles and promoting re-use of designs across brands. This initiative led to a 14% increase in productivity. Additionally, linking Figma directly to the front-end CSS, allowing Figma token values to directly control live CSS values. Video below shows how theme switching worked
With over 10 distinct design systems across the combined businesses for web, apps, and customer communications, we were managing bloated and impractical libraries. The lack of governance around adding new components led to significant fragmentation. Our creative team, with over 80 members from multiple legacy teams, wasn’t well-aligned, and there was no central library for reference, resulting in low adoption of design systems. This inconsistency caused engineering teams to repeatedly build the same components, increasing project timelines, costs, technical debt, and leading to a fragmented customer experience. Accessibility became an afterthought, rather than a core part of the design process, and we weren't effectively leveraging creative technology.
The Approach
We needed a streamlined approach to eliminate redundant work, ensure design and component alignment, and boost overall efficiency across product squads. To address this, I brought together design leaders to establish a guild that served as a bridge between the core design system team and the broader creative group. My goal was to gather feedback on existing and new components and designs to understand what was working, what wasn’t, and how we could refine our approach to deliver seamless, user-friendly digital experiences across all brands. The solution was the introduction of a Central Design System. We recognized that consolidating into a single design system would drive positive change, though it required a significant investment and a shift in workflow. This involved positive engagement from all product owners, engineers, designers, researchers, and copywriters—a total of around 300 people.Automated CSS Pipeline
In addition to the significant productivity boost, I also collaborated with engineering teams to create a state-of-the-art workflow that automated front-end CSS values directly based on Figma token values. This pipeline allowed styling changes in the front end to be automated and managed directly from Figma.
Bespoke Analytics
To effectively measure the return on this investment, I needed better analytics than Figma supplies out of the box. We created a bespoke tracking system to monitor and measure usage, demonstrating where value was being added. It also helped identify unnecessary detachment, exposing underperforming components so they could be improved.
Results
14% overall design productivity improvement 25% acceleration of O2 design backlogThe video below walks you through the strategy and process:
