Unlocking 1833 hours of efficiency with AI & Design Systems

The Challenge:

Following a significant reprioritisation, the Design Systems team was dissolved, leaving behind a “locked” system. There was minimal documentation and no one left who understood the complex technical architecture of the Figma-to-Code pipeline.

The Strategy:

My chapter lead and I developed a business case and negotiated a 6-week window away from my squad to act as a one-person DesignOps team. I self-taught the technical skills and then reverse-engineered the Figma token system architecture and Supernova integration. I then utilised an AI-accelerated documentation workflow to build a comprehensive "Operations Manual" for the system.

The Impact:

I delivered the main objective of creating our ‘Ops Manual’ 3 weeks early by effectively leveraging AI tools. I was able to use the remaining time to audit and uplift all existing components to 97% component-to-production parity. This transformed a "black box" into a governed, scalable asset that saved the organization 1,833 hours of design debt (approx. 46 working weeks) within the first couple of months.

Tools: Gemini, Figma, Figma Make, Supernova

The Process

I identified that this wasn't a "design" problem—it was an operational risk. The priority was to safeguard the investment the business had put into the design system, and ensure the IP and management methods remained accessible outside of individuals.

Technical Deep Dive & Self-Education

I put myself through an intensive bootcamp, which included online courses, workshops with Figma advocates and AI assisted learning to upskill in:

  • Advanced Figma Systems: Understanding the Figma functionality and features available to enable design systems, as well as industry best practice.

  • Multi-Brand Token Architecture: Understanding how tokens flowed across different brand themes, breakpoints and individual components to then integrate with Supernova.

  • Supernova.io: Learning how the previous team had structured the documentation platform to bridge Figma and Storybook.

The AI Accelerator

I leveraged AI as a ‘technical writer’ to help me codify complex workflows into readable guides. This allowed me to deliver a full operations manual in 3 weeks instead of 6, and scale institutional knowledge.

  • Architecture Mapping: I fed Gemini the technical specs of our token architecture, and used prompting to set it up as a Figma design system and documentation expert. I used it to generate clear, standardized explanations of how these tokens functioned across different brands and breakpoints so that any designer could understand the logic.

  • Figma Workflow Standardization: I used Gemini to draft step-by-step guides for key Figma processes:

    • Branching & Merging: How to safely make updates at both a token and component level.

    • Publishing & Consumption: How to push updates without disrupting other squads, as well as the dependancies within the system.

  • Governance Protocols: It wasn't enough to just document the "how"; I had to build resilience into the system by establishing the "who" and the "when”. This included charting feedback loops with SMEs, and when to involve key decision makers from across the business. The goal was ensuring that every addition to the system was vetted for consistency and production-parity before being merged.

Business Impact

1833 hours saved in 2 months

We’ve eliminated the friction of repetitive QA and approval cycles by ensuring our design system components are actually usable. Instead of a designer wasting 10 minutes debating which of 180 button variants to use, they pull a verified component from the library. In just two months, our team did this 11,000 times—effectively reclaiming 1,833 hours, or 46 working weeks, of pure design capacity.

4 weeks effort down to 10 minutes

The time saved to deploy updates, resulting from being able to utilise the design system and automated workflows.

If we need to update an accent colour across 18,000 instances, we don’t run a manual audit. Anyone can follow the documentation, update the token, and see that change live in production in 10 minutes. It turns a weeks-long design debt task into a minor configuration tweak.

Better partnerships = better products

The process of publishing the design system helped re-establish our partnerships across the business, including Engineering, Product, Ecom and Marketing.

It gave us a single source of truth that ended the guesswork between departments. We stopped debating the basics and started delivering a consistent experience across the entire business.

The AI Velocity Engine

A functional design system is what allows us to plug into AI engines like Figma Make. Because our components are already standardized, we can rapidly generate working prototypes that are perfectly aligned with our current products.

This moves us past the "how it looks" stage and straight into "how it works." We can test ideas faster and focus our energy on solving the right user problems rather than manually instructing on UI.

to

Technical Skills

  • Figma

  • Figma Make

  • GenAI (Gemini)

  • Supernova

Design Skills

  • Design operations & strategic planning

  • Advanced technical Figma and design systems execution

  • AI-accelerated documentation & delivery

  • Systems governance & maintenance processes

  • Product, Ecom & Engineering Collaboration

  • Strategic Presentation & Commercial ROI