Google Material 3

Designing a customizable design system

Google Material 3

Designing a customizable design system

Google Material 3

Designing a customizable design system

Material 3 components
CLIENT

Google

SERVICE

Design System

YEAR

2022–Now

Overview

Material Design is Google’s Design System, created and maintained by Google Design Platform. Material 3 is the latest version of Material, which champions personal, adaptive, and expressive experiences – from dynamic color and enhanced accessibility, to design tokens, and more. I've collaborated with the UX, Guidelines, and Education teams within the Google Design Platform to maintain our assets program, optimize components for seamless use, and carefully constructed design libraries for both internal teams at Google and the public Figma community. In addition, I’ve created internal documentation for our team’s standards and several educational resources to raise the waterline of craft at the company.

Material 3 buttons and cards
Material 3 buttons and cards
Material 3 buttons and cards

I created and organized components like simple buttons, cards, chips, date pickers and app bars to create a design complete Figma Design Library.

Sliders component
Sliders component
Sliders component

I enhanced components, such as the slider, for various applications and scalability by employing strategic layer organization, leveraging auto layout techniques, and thoughtfully implementing constraints.

Challenges

Our team faces quite a few challenges as Material 3 is a platform-agnostic design system with both an internal Google and external public audience. Each product within Google has its own needs, making guidance and education integral to the adoption of Material 3.

Our team faces quite a few challenges as Material 3 is a platform-agnostic design system with both an internal Google and external public audience. Each product within Google has its own needs, making guidance and education integral to the adoption of Material 3.

Our team faces quite a few challenges as Material 3 is a platform-agnostic design system with both an internal Google and external public audience. Each product within Google has its own needs, making guidance and education integral to the adoption of Material 3.

Results

We've built an amazing design library and shared it with the Figma community. It has grown to over 650k users and is one of the most used community files on Figma. Our libraries have seen an increase in the number of insertions and teams using them. We created fun interactive presentations pushing the boundaries of what Figma prototypes can do and showing designers how to adopt our design libraries and documented guidance for the creation of design libraries for Design System owners.

Prototyping components
Prototyping components
Prototyping components

Using Figma's prototyping feature, I added built-in prototyping to components. Saving Designers time with reusable prototypes they could use in their designs.

Time picker
Time picker
Time picker

I built intricate components that required the integration of subcomponents and distinct elements.

Material 3 Figma Community
Material 3 Figma Community
Material 3 Figma Community

I oversaw the upkeep and enhancements of the official Material 3 community library while actively gathering feedback from our designer community.

build a bridge with design kit
build a bridge with design kit
build a bridge with design kit

Using my prototyping skills I collaborated in creating an educational Figma presentation using prototyping for animation and interaction.

A video showcasing our interactive Figma presentation.

Let's chat about design systems

Let's chat about design systems

Let's chat about design systems