One of my most popular lessons ever is about Design Systems. It’s a comprehensive guide to how to learn and steal from them.
One of the examples I use is Google’s own Material Design System, explaining exactly how to steal from it and use it as a free design course – paradoxically, they chose to feature it in their Google UX Design Certificate Course 🙃.
But why?
While most articles talk about what a design system is and how to make one, in my course, I had been framing them as a teaching tool to help my students explore and learn best practices and principles of atomic UI design, UX and Product Design.
Because what many designers don’t notice is that existing design systems are a tremendous untapped resource for learning UX/UI design just by studying them!
What better way to understand how to design a user flow for e-commerce than from Shopify or an iOS mobile app than from Apple?!
Design Systems are full of what we call UI Components and Design Patterns and great product designers know how to use these to inform their decisions and how best to assemble them to create their own designs.
The best part — there is no need to reinvent the wheel when it comes to learning about these, not when the best companies in the world have already paved the way, tested them with actual users and published their methodologies online in the form of a freely available design system.
“Sometimes I think everything I draw is just a combination of all of the millions and millions of drawings I’ve seen.”
So how can you learn and steal from Google?
Well it starts by taking a look at their design system. The current iteration they’ve released is called Material Design 3: Expressive.
It’s completely open source and it contains every atomic UI component, style, typographic rule, motion system and foundation of UI design you could ever need to know about.
It’s basically a free course in UI/UX design.
How to get started stealing
I recommend exploring the online guide and also downloading the Design Kit for Figma so you can follow along and play with it yourself. Here’s how use it as a study guide and reference.
Part 1: Philosophy
First up, we have the philosophy of Material Expressive Design System.
If you’re familiar with Material Design 2, Material 3 isn’t a dramatic visual overhaul or departure from that. It’s more of a mindset shift.
The earlier versions of Material Design were about giving everything a clear, consistent Google look — strong colors, clear structure, recognizable patterns. It was polished and unified. Material 3 — often referred to as “Material You” — shifts the focus from consistency to personalization. Instead of saying, “Here’s how Google apps should look,” it asks, “How can this system adapt to the person using it?”
So the biggest difference isn’t just softer corners or new color rules. It’s that the design system becomes flexible by default. It can generate its own color palettes, adjust to light or dark mode more fluidly, and feel less rigid without losing structure. If Material 2 felt like a carefully designed uniform, Material 3 feels more like a tailored outfit — still structured, but made to fit the individual rather than the brand alone.
Every design system needs to have an underpinning philosophy like this, something that stems from the product’s vision and the ideal user experience you want people to have when they use your product.
🥷🏼How to steal from this: Think about your own design philosophy and how you would write something like this for a product or project you are working on.
Part 2: Foundations
The Foundations section defines the core structural rules that govern how an interface is built and should behave in different environments.
Accessibility
If you haven’t spent time learning about accessibility and accessible design yet, this is a great place to start.
Here’s you’ll get introduced to accessibility concepts, requirements and goals, the minimum requirements established by WCAG that you need to have in order support specific human needs and how things should be documented across your components and pages.
Assistive Technology
You’ll also learn about assistive technology, how to support different disabilities and the various inputs and outputs that make it possible.
Adaptive Design
Another area of foundations is Adaptive design, like accessibility it’s another one of those silent design techniques that is often left ill-considered. Things like how user preferences affect the visual design, device usage and the conditions that determine layout, sizing and presentation.
Interaction Design
Interaction design deals with things like gestures, inputs, selections and states and are an extremely important part of UX design. Things like selection indicators, how users enter text into fields, focused and hover states of buttons are crucial experiences every designer must consider.
🥷🏼 How to steal from this: Start to build an mental map and checklist of the ‘invisible’ things that your designs need to consider and accomplish.
Part 3: Styles
Now, onto the flashy stuff. Like most design systems the styles section deals with the visual identity of the components and elements you see on screen. Things like colors, elevation of cards, icons, graphical elements and shapes, typography and even motion design.
One of the most important and more advanced aspects of M3 is in the color schemes section. It’s no longer just about choosing a static color palette, but about choosing dynamic color schemes that change based on personalization and interaction on the user-side. It’s a whole other world to consider, with many color decisions to be made and permutations to be tested.
🥷🏼How to steal from this: You can quite literally steal their color palettes, icons and fonts. Check the most up-to-date resources in each section of the guide for links.
Part 4: Components
My favorite part. Product design is all about these tiny, little atomic elements that stack together to form bigger and more useful elements. The way we assemble and choreograph the interaction of these elements is what matters the most.
Google organizes these components into 6 main categories:
- Action
- Containment
- Communication
- Navigation
- Selection
- Text input
I love the simplicity of this. It takes an otherwise seemingly endless list of components and makes it mentally manageable and gives them a distinct purpose.
☑️ Checkboxes - that's an action component
📆 Date and Time Picker - those are selections
⚠️ Dialogs - these are communication (and maybe an action thrown in there for good measure)
🥷🏼 How to steal from this: Learn what each of these are, how to use them and practice assembling them and designing them yourself from scratch to form larger components and entire screens and flow.
Bonus - Part 5: Advanced Studies and ‘Thievery’
Each component has a ‘Specs’ tab where you can go deeper into the granular aspects of things like design token naming as well as precise spacing and sizing of these elements.
Now this is just Google’s way, but as you learn and improve your design skills this is the kind of precision you should be aiming for with your own design elements and thinking about how to document and communicate them clearly to other designs and developers on your team — this is part and parcel of excelling and your craft.
Everything you need to become a great product designer is all here, and it’s here for free. You just need to know how to look at it and how to steal from it.