Scaling a design system to reduce design-to-dev handoff time by ~30%

Converted a basic system into a scalable, token-powered design system.

Project Overview

The project began with a common misconception: focusing on the visual side of the design system. However, our team quickly realized the core truth: “A beautiful mockup means little if it can't ship.” Our focus had to shift from aesthetics to architecture. We were building a shared library that needed to work under real-world conditions, scale efficiently, and be maintained by many hands.

Services:

UX Research

Approach & Process

🔹 Designing Within Context

Rather than designing in isolation, we integrated our design system work directly into product workflows. This kept things grounded and allowed us to test components in live scenarios (where constraints and edge cases shaped better decisions)

🔹 Foundational Learning: Atomic Design

Our foundation was built using the Atomic Design framework - a concept encouraged (repeatedly and supportively) by a senior teammate. This mental model helped break complex interfaces into:

Atoms (colors, typography, spacing),
Molecules (grouped UI elements like search bars),
Organisms, Templates, and finally,
Pages — real layouts with real content.

🔹 Tokens, Variables & The Power of Structure

Figma variables seemed complex but once we started applying them, it changed everything:

Easy light/dark mode switching
System-wide consistency
Faster theming and updates

Tokens and variables gave our design system long-term structure and adaptability.

🔹 Cross-Team Collaboration

One of the most powerful parts of the process was bringing everyone in. Design, dev, product, QA - all contributed to how the system was shaped.

Sure, there were heated discussions at times (design iterations can be personal), but we always ended up with a version that worked for everyone.

“The benefits of a design system are as much for engineers as for designers.”

This alignment made the system more usable, better implemented, and deeply understood by everyone.

Key Takeaways

Getting the system live was more valuable than polishing every detail. It gave us something to test, use, and improve.
Collective ownership led to smarter solutions and more buy-in.
Figma tokens and variables made theming, scaling, and iterating less chaotic.
The system we launched wasn’t the final one. And that was intentional - we built it to grow.

01.

AI-assisted Domain Research

Getting the system live was more valuable than polishing every detail. It gave us something to test, use, and improve.

03.

Simplifying Complex Information

Collective ownership led to smarter solutions and more buy-in.

04.

Accelerating Design Exploration

Figma tokens and variables made theming, scaling, and iterating less chaotic.

02.

Improving Clarity

The system we launched wasn’t the final one. And that was intentional - we built it to grow.

Reflection

We’re still learning. None of us claim to be experts in design systems but this experience taught us that momentum, collaboration, and adaptability matter far more than perfection.

A successful design system isn’t just the one that looks good — it’s the one that ships, evolves, and actually gets used.

This case wasn’t about building something once and walking away. It was about laying a foundation we could build on, with, and together.