The Best of Material in 2022

The year is nearly at an end, and as we look forward to 2023, it’s also time to look back on 2022. It was a busy year for the Material Design team, with new system capabilities, component updates, design resources, and entirely new workflows to help designers and developers continue making beautiful, usable products, faster.

In this post the Material Blog editorial team has collected, in no particular order, some of the top highlights from this year in Material Design. From the complete redesign of our guidelines site, all the way to the code that helps you bring Material to life, let’s run through some of the things that made 2022 a great year to get into Material.

The Material.io redesign

First up is a recent update: the Material.io redesign. Design Lead David Allin Reese broke down all the updates on the blog, from implementing content-based dynamic color across the guidelines to new navigation, all the way down to custom bullet points, you won’t want to miss the case study (or the site!)

Key takeaways

• Material 3 features like dynamic color are woven throughout the guidelines, enhanced by imagery that brings the guidelines to life.
• A comprehensive navigation scheme from the navigation rail, drawer, and tabs help readers find what they’re looking for quickly and consistently.
• Visual, animated transitions contribute to the vibrance and coherence of the guidelines as readers navigate between sections.

Accessibility updates & improvements

From a more accessible Switch component, all the way up to holistic color relationships across the design system, Material continues to build with accessibility as a foundational quality to ensure what we build – and what gets built using our technologies – can be built for everyone.

Key takeaways

• Lots of new accessibility guidance launched at Google I/O, along with a corresponding design-to-implementation framework to optimize experiences for assistive tech.
• Check out our list of accessibility-focused content and resources.
• Our session from Google I/O 2022 goes deep on the ways in which accessibility is baked into Material 3, from components to holistic interfaces.

Replacing “users” with people

The Material You features in M3 are all about putting the people using digital products at the center of their own experience. That’s why Material Design took a step back to make sure what we’re building accounts for the endless subjectivities of our users, asking ourselves, “why do we call them ‘users,’ anyway?” Through a series of posts, Content Designer CC Cassidy, Senior Art Director Emily Blank, and Production Team Lead Euphrates Dahout broke down the process of replacing our notion of a “user” with an actual person, drawing together a realistic sense of who might be using our products, what they might be interested in, and what their life with technology might look like.

Key takeaways

• Building a set of holistically considered people to bring along with us through the design process is one way to better understand the impact of our work.
• A selection of imagery, chosen from – and led by – the perspective of each person, helped enrich the personas we worked with.
• Integrating the new personas into our design tools and processes was tricky, but paid off. They were able to come with us through the entire design process, providing unique insights as we worked.

Component library updates

Material Design’s engineering teams continued to drive forward major updates to our component libraries to complete the path from design to implementation. In particular, Android Dev Summit saw the release of two new stable versions of Material components: 1.7.0 for Android Views, and the first stable release for Compose.

Key takeaways

• Material Design 3 for Compose got its first stable release.
• The MDC-Android stable release 1.7.0 brought Material 3 shape guidance and improved accessibility.
• As always, you can contribute bug reports and feature requests on Github (for Views and Compose) and join the community on StackOverflow.

The M3 Design Kit

Our Material Design Kit got a release of its own, bringing together 28 UI components and 429 styles together, giving makers a solid foundation for their designs with Material.

Key takeaways

• Production Team Lead Euphrates Dahout breaks down the community file in a blog post, covering all the updates and how to get started.
• The Design Kit makes use of Figma’s most advanced features, with metadata for accessibility, color values, token names, variants, and interaction state details.
• The Kit also integrates with the Material Theme Builder so you can customize the whole system quickly and easily, with more features on the way.

Relay in alpha

Relay is a new design-to-code workflow for Android UI, and the toolkit launched in alpha at Android Dev Summit this year. With plugins for both Figma and Android Studio, Relay lets designers create, annotate, and package their UI components for developer use, including information about layout, styling, dynamic content and interaction behavior. These packages are then imported to Android Studio for pixel-perfect implementation, and linked up to Figma for updates.

Key takeaways

• Check out the full Relay documentation on the Android Developers site.
• Relay is in alpha, and looking for your feedback!
• Keep track of updates by joining the Relay mailing list.

Roboto variable fonts

This year, the Roboto superfamily of typefaces was expanded – and transformed – by the addition of two new variable typefaces: Roboto Serif, the cozy, comfortable serif designed from the ground up for comfortable and customizable digital reading experiences, and Roboto Flex, which made Roboto super scalable, adaptable, customizable, and optimizable.

Key takeaways

• Roboto Flex has a stunning 12 variable axes, making it not just fun to play with, but, well, flexible.
• Roboto Flex has actually been tested out in Material Blog headlines since 2021 😉
• Roboto Serif is designed for reading comfort, especially in long passages of text. An optical size axis – among others – means it can serve your whole layout.

Research, research, research

Research is a key pillar of Material Design, and greatly informs our work. In 2022, we learned a lot, about typography, components, and even clocks.

Key takeaways

• Research into font grade (which is similar to weight, but maintains the font’s width) taught us how readability could be improved for specific audiences in known contexts.
• Research and Design partnered to test over 50 unique variants of the time picker component, finding a more usable solution for 24-hour clock users.
• Our Switch component was redesigned based on our accessibility findings.

Material Symbols

Okay, we have one more variable font to tell you about. Actually, this one is an icon set, too. Material Symbols launched this Spring, exploding the expressive capabilities of Material Design’s icon set with variable axes for weight, fill, optical size, and grade.

Key takeaways

• The new variable font takes the 2,000+ Material icons from static designs across 5 styles, to a nearly limitless expressive range that can fit into your product at different sizes, stroke widths, and styles.
• There’s a Figma plugin to help you customize and integrate the icons directly into your designs.
• View the full collection and play with the sliders on Google Fonts!

Bringing the system to life

Last but certainly not least, it’s worth taking a moment to highlight the artists we spoke with who helped Material Design – from new guidelines to

Key takeaways

• In conversation, the team at Oddfellows detailed for us how they created four unique illustrative styles for Material.io.
• Jamie Chung and Senior Art Director Emily Blank unpacked the artful, abstract photos you see across Material’s guidelines.
• Conceptual Artist Derek Brahney answered a few burning questions and described the work behind abstract photos and avatars designers across Google use in their work.

Looking forward

Across all of the disciplines represented within the Material Design team, 2022 has been a busy year. These are just a few of the moments we could fit into a best of 2022 post, but take a look through the blog archive or the guidelines site and you’ll see the contributions of everyone on the team.

Through news, announcements, research, design resources, and engineering updates, 2022 has been a big year for Material and on our blog, and 2023 is already shaping up with a lot more in store. We can’t wait to share even more as Material continues to drive forward. Until then, thanks for reading and bringing Material Design to life through your creations. Stay in touch with us @MaterialDesign on Twitter.