Modernizing a Design System for 70+ Google Designers

🔒 Disclaimer
Due to my NDA with Google, this is a high-level overview. Visuals are recreated with public Material Design components.

Role: Designer

Team Size: 1 Designer + 1 Lead Designer + 2 Engineers

Tools: Figma

Timeline: 6 weeks to research + build

Year: 2025

The Opportunity

As my main project work started to wind down, I noticed our team's UI felt dated. It was still built on Google Material 2, while the rest of Google was moving to Material 3. We were still using Material 2 while Google had largely transitioned to Material 3, which introduced dynamic color, refreshed typography, improved accessibility, and a more modern visual language.

Everyone on the team was too busy with product work to take on a migration, so it kept getting pushed aside.
It felt like the perfect task to pick up. With my last three weeks open, I took ownership of migrating our team's design system to Material 3 for a 70+ designer org.

What Changed: A Closer Look

Chips are one example of how components evolved across the system.

M2: Lightweight, outline-based chips with minimal emphasis and subtle affordances.

M3: Filled chips with stronger hierarchy, clearer iconography, and improved visual contrast for accessibility.

Process

I'd built components before, but never a full system. Before starting, I researched how design systems are structured, how Figma libraries work, and how to build within an existing framework rather than from scratch.
My first instinct was to build a brand-new system. I realized the faster, more maintainable path was to bring in Material 3's components, rebuild and tailor them to our team's branding, and consolidate everything into one library.
I built two files:

  • A designer-friendly reference file, where anyone could browse every component, variant and use case at a glance.

  • A backend library file holding the actual components designers pull into their work.

In total, I rebuilt about 30 components, each with 5 states, for roughly 150 variants. I used Figma properties, booleans and variables so designers could switch between mobile and desktop, dark and light mode, and component states without detaching anything or breaking consistency.

Challenges

  • Structuring 150 variants so they stay easy to use. I organized components around properties and variables so designers customize through the panel instead of hunting through layers.

  • Learning new Figma concepts quickly. Variables, libraries and system architecture were new to me, so I learned them while building.

  • Migrating without disruption. I needed an approach that let teams move to Material 3 smoothly, without breaking ongoing projects or the products users relied on.

Results & Impact

  • Delivered a Material 3 library of ~30 components and ~150 variants in 3 weeks

  • Gave 70+ designers a single, modern source of truth

  • Made customization faster through properties and variables instead of manual workarounds

  • Improved accessibility through Material 3's stronger contrast and hierarchy

What I Learned

Design systems are products too. Their users are designers, and the best systems are the ones people can understand without a walkthrough. This project taught me to treat structure and naming as UX decisions.