Oct 27, 2021

Start building with Material You

Implement dynamic color and explore some of the latest personalization features of Material Design 3

Posted by


We unveiled Material You—a set of design system updates that enables more beautiful, personalized expression—at Google I/O this year, and you’ve seen glimpses of it in our products. Now we’re excited to share Material You with our community.

You’ll be able to access everything you need to start building for Android 12 on the new home for Material Design 3, along with new videos from the Android Developer Summit. Designers and developers will be able to start using dynamic color today and take advantage of new tools that make using Material easier than ever.

link
Copy link Link copied

Dynamic color makes your app more personal

Creating a dynamic, personal approach to color that prioritizes accessibility is no simple task—for design or engineering—but new Material You features can take care of it for you.

Dynamic color plays a key role in Material You, creating individualized and expressive experiences for your users and opening up new possibilities for the role of color in your app. With dynamic color, custom palettes that emphasize expression and accessibility are algorithmically generated based on your brand or—starting with Pixel—an individual’s wallpaper. These colors can manifest as dynamic light and dark themes, and can be adjusted based on preference.

What’s new

link
Copy link Link copied

Material Components get a visual refresh

Along with dynamic color, we’ve also updated several Material Components to support Material Design 3 with a new visual style that incorporates improved use of white space and new state indicators. We’ve designed these components to be responsive to dynamic color, applying Material’s new color roles in a consistent and comprehensive way, sensitive to usability, accessibility, and your brand. The updates allow you to maintain and blend your brand colors with dynamic colors resulting in a one-of-a-kind, personalized experience for the user.

What’s new

link
Copy link Link copied

New tools simplify design and implementation

Want to start exploring how Material’s new color system can work in your app? New tools for developers and designers make it easy, providing simple controls that give you access to the complex Material You color generation system.

The Material Theme Builder is a tool that helps you see how Material Design 3’s dynamic color and new type scale will look in your app, so that you can enable it with confidence. The tool allows you to visualize dynamically extracted colors, either from an image or of your own selection. After creating a color scheme and type scale, you can export the theming code to multiple formats: MDC-Android (XML), Compose Material (Kotlin) and now Design System Package (DSP). The Material Theme Builder is available as a Figma plugin and web tool which you can use today.

We are also releasing an updated version of Jetpack Compose Material that supports the updated Material Components. Don’t miss the session from Android Developer Summit.

What’s new

link
Copy link Link copied

Design tokens improve collaboration and cohesion at scale

Our new tools are backed by a concept that can greatly help your team’s efficiency, collaboration, and cohesion across experiences: design tokens.

Design tokens represent design system styles as data, providing a source of truth for all products (and contributors!) of that system to stay in sync as the system evolves.

Tokens for things like type styles and color roles will help keep your design and implementation aligned through a Design System Package (DSP) that bundles up all your tokens to make them portable across tools and platforms. Find token values for individual components in the new guidelines.

What’s new

link
Copy link Link copied

Getting started and looking forward to the next step

Today’s updates are just step one on the Material Design journey, and there’s still a lot to look forward to. Keep an eye out on Material.io and subscribe to our newsletter for updates.

By  starting with these latest Material updates today, you can prepare your app for adoption of Material Design 3 to come. Below, see the list of sessions from this week’s Android Developer Summit you won’t want to miss.

  • Material You in Jetpack Compose
  • Material You: Applying dynamic color and your brand
  • Designing beautiful apps on foldables and large screens
  • Design to Code: Turning handoffs into high-fives
  • #AskAndroid: Jetpack Compose with Material You
  • #AskAndroid: Developing for large screens
link
Copy link Link copied

What’s coming next...

  • Adaptive layout guidance will continue to expand, building on what we launched at Google I/O 2021 with guidance and system behaviors tailored for new form factors, including foldables.
  • Our vision for experiences that adapt to every need will continue to drive accessibility updates focused on using dynamic color and adaptive layouts to make it easier for developers and designers to create apps that work for every user.