Start building with Material You
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.
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
- New dynamic color guidelines describe how the dynamic color system works in detail, from generating tonal palettes to how color gets applied to each component.
- Guidance on customizing for brand expression describes how you can use the new color system to keep your app unique while adapting for every user.
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
- Updated Figma Design Kit helps designers easily build with Material Design 3 in Figma
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
- Material Theme Builder lets you preview how your app will look with dynamic color as well as design a custom Material Design 3 theme for your product.
- Updates to Jetpack Compose Material and MDC-Android
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
- New guidelines for building with design tokens describe how to incorporate design tokens to streamline your workflow and improve consistency across your product.
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
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.