Material You & Figma: Bringing Dynamic Color & brand together - Rody Davis, Ivy Knight (Schema 2021)

In Web design

Material You & Figma: Bringing Dynamic Color & brand together - Rody Davis, Ivy Knight (Schema 2021) - read the full article about Figma, Web design and from Figma on Qualified.One

Share

Tweet

Figma
Youtube Blogger

[Rody] Hi Im Rody Davis, a Developer  Advocate for Material Design.

[Ivy] And Im Ivy Knight, a Designer  Advocate for Material Design.

[Rody] Our team focuses on helping  the community build beautifully with Material Design by providing  resources, tooling and examples.

[Ivy] Material Design is a design system  created by Google backed by open source code to help teams build high quality, digital  experiences for Android flutter and the web. It includes design guidelines, and  an extensive library of components that can be customized to meet  your style and brand needs.

Since its formation, Material Design  has relied on color to express hierarchy and communicate meaning in UI.

A primary color appeared  more frequently in an app, while secondary colors were used  to accent key parts of your UI.

Throughout the years, weve expanded  on colors to be more expressive.

Building off Material Designs  primary and secondary colors, Material Design 3 introduces tertiary  and container colors to express a  harmonious set of tonal palettes across your UI the check for accessibility.

This year at Google I/O, we showed the bold  and expressive evolution of Material Design.

Were excited to be here to show  you how to implement Material You in your digital experiences,  and the tooling we created to support designers and  developers with dynamic color.

Color is a foundational  element in any design system.

Material You reimagines color as  a more individualized experience.

Dynamic color lets personal devices feel personal, and we believe design systems should be just  as personal as the devices they appear on.

By incorporating personal preferences  in the UI of your product,  users have more control than  ever over their devices.

With dynamic color and Material 3 color  schemes, your apps color automatically adapt and integrate with user colors by letting their  wallpaper influences the apps color scheme We understand this is a new way  of thinking of colors for your app The digital products we create can  now reflect trends in our real life products that adopt more personal  colors, patterns and materials.

Dynamic color embraces the need  for color to reflect an apps design sensibility while also honoring  an individuals needs and preferences.

Its the key part of Material You,  in which an algorithm derives colors from a users wallpaper to be  applied to their apps and system UI.

Since color schemes are defined by tonality, rather than a hue or a hex value,  the system of tonal palettes  essential to making any color  scheme accessible by default.

Using a minimum 60 luminance  spread in color pairings, color combinations provide enough contrast  to ensure accessibility standards.

For example, these colors may have a different  hue to them but the tone is very similar making contrast inaccessible, especially for those with  certain color blindness and at the bottom here, heres the same concept applied to a fab and  with the corrected versions to the right of them.

The color system automatically assigns the appropriate hue, chroma and tonal values for all roles.

How does this all work? Starting with the users wallpaper, a source color is extracted and  extrapolated into five key colors.

Each color is then interpreted  into a tonal palette of 13 tones and a selection of colors from the tonal  palettes are then slotted to a group of specific roles and values that  map to components called a scheme.

Color schemes can be considered a cohesive group of relative tones rather than a  fixed group of constant values.

Light and dark schemes are generated for each Semantic colors such as air color  is also slotted automatically.

Each color roll required for the UI is derived  from the key colors using this process, ensuring proper contrast between elements.

These roles are what you  will map to in your designs.

You may be familiar with the current  12 color slots in Material Design,  like primary and on primary.

With Material Design 3 or M3,  we introduce a new tonal palette  and roles and schemes.

Container and its respective  on container used for UI elements that do not need as much emphasis  as their non-container counterparts and a new tonal palette, tertiary, used to  bring broader color expression in your product.

[Rody] But how do we make this all possible? Well, its through design tokens and  this allows us to change role assignment that cascade consistently.

Building with values that change  at runtime means that we need to reference colors by their semantic  meaning, instead of hard-coded values.

Building off of the Material Design to color  roles, tokens provide global styling slots as well as a token being able to have multiple types  paired with a value or referencing another token.

With Material 3, we now have the concept  of palette reference and system tokens.

These color rolls you build with are the system tokens and they can inherit  from the reference tokens, which we are introducing  with called tonal palettes and these include primary, secondary,  tertiary, neutral, neutral variant, and error Design tokens enable flexibility  and consistency across a product by allowing designers to assign  an elements color role in a UI, rather than a set value which then be  handed off to a developer to implement.

Design tokens can be generated, saving the developer and designer  time by agreeing on a source of truth.

A developer can then reference this  file and map to the theming object,  for example in compose.

If these tokens change in code,  this can now easily be shared back with the designer by having the  values updated in their design mocks Swapping colors and typography  hard-coded values with tokens should make it easier for you  to iterate on your designs.

Colors in a tonal palette are mapped to  light or dark scheme through design tokens.

The color scheme values can be  overridden to inherit custom colors, or just the reference tokens themselves.

User generated color utilizes these color mappings  to tokens to create dynamic and expressive UIs.

When the system colors change at run time,  they will update the tonal palettes which then update the color schemes, which is what  you use to map to your components in your theme It is important to use the right  color roles for the corresponding component  to ensure accessibility and continuity.

We needed a way for app creators  to explore dynamic color, and we understand that the  color system via design tokens.

So we built a tool.

And were so happy to introduce  the Material Theme Builder.

A tool to help designers and  developers create custom color schemes, and visualize dynamic color in their UI.

We knew introducing dynamic color  brought on the new challenge in how we thought about  and approach color in our designs.

We wanted to provide designers  and developers hands-on tools  to explore user-generated dynamic color.

This tool can help visualize how  it may be reflected in their UI, and can be integrated  into their existing workflows.

We built it for Figma and the web.

Material Theme Builder creates  Material Design tokens as Figma styles.

These tokens are automatically mapped to our  components within our Material Design Kit, and can easily be mapped to your custom  elements within your Figma designs.

As Design System Advocates, it was important  for tooling to act as educational guidance.  Showing the process on how a source  color generates tonal palettes, and how these mapped to color schemes helps creators  understand the process and magic powering it all.

We were developing this tool  in parallel with guidance.

We tested it early and often  with internal teams, and  this led to fast iterations based on feedback.

In its early inception, the tool was  primarily focused on visualizing dynamic color but the complexity of dynamic color  is that the generated color scheme doesnt paint a complete picture of the  various ways your UI color can change.

It became clear that managing  themes was an absolute necessity.

In order to make iteration easy for  designers, we created a way to swap themes.

By using the same token prefix, creators are able to swap easily between various themes.

Each theme is validated to check  for missing tokens on launch, which meant being able to use the plugin to test  and create faster themes within our design mocks.

But all the tokens have a structured format, which means that we get to preserve  the metadata by switching themes.

This also allows for toggling   between light and dark themes as well.

This also means that managing designs consisting  of multiple brand themes was a breeze.

Theres no more manually diving into  the style pickers, setting colors, and this now can be done by  just swapping to a new theme, hitting swap and now the plugin will be recognized  because of the Material Design tokens.

We wanted to make generating  from an image easy for designers, so we store the image as a color  style and load it in on launch.

Alright lets see all this in action.

Jumping into our Figma file with  the Material Theme Builder open.

We can open it up and connect  it to our design kit components.

Here we have the plugin,  and were just going to look  and see what the default canvas is outputted.

Were going to select an image, and  have it run through the algorithm.

With an image selected, it updates the image style  token and generates the new colors on the canvas.

Here we can see the colors, key  colors that are generated as well as the light and dark schemes  from the tonal palettes, and the surfaces.

The plugin works with our design kit allowing  you to select any arbitrary selection, and click on swap to have it migrate to  the tokens of your current selected theme.

You can quickly iterate on these colors by  choosing new images, which well do now.

This makes it really easy to iterate on your  designs, while having a single set of tokens and new images that are stored  in those seed values.

Here we can see all the colors change,  but our moc stays the same.

So beyond visualizing dynamic color, we need a way for designers and developers  to migrate to Material 3s new color system.

In this new color system, we have an  entire scheme thats derived with tokens.

So here, we can update our seed color  to generate these new color schemes with this new shuffle button.

This allows us to check and see all the variety  of ways that our UI may look on a users device.

Even though that colors are accessible by default, this allows you to make sure  that your designs still look good.

Here we can just click a couple  different seed colors, and see how it looks.

The seed color option is really nice to be able to really quickly iterate on these designs.

You can also pick any color in  the custom color picker as well.

Our new color system added  and removed color tokens,  which required mapping across  our material components.

We added the ability of  building with a custom theme,  and this theme can reflect your brand style and you can set it as a  foundation of your apps UI color Here we can just add a new theme, and switch to it in the dropdown.

Moving over we can see that it swapped  out the tokens for our branded theme, and now we can choose our brand  colors, starting with our primary.

The primary value input will also  create and act as a seed color, updating the other key colors cascading down.

Now we can choose our secondary and  tertiary colors along with our brand.

Using the Material Theme Builder,  this provides a branded color scheme, and make sure that its  harmonious and accessible by default.

These still generate the full  tonal palettes, which you can use  and reference in your designs.

Ill update the secondary and tertiary  inputs with my brand colors, and then ill override the key color.

This will interpret into tonal palettes,  which generate the light and dark scheme.

This custom scheme can be  used on Android versions 11 or below that do not have dynamic color available.

If you have semantic colors,  they dont have to be left out, and they will be included as additional  colors ready to be implemented.

This means that you can use dynamic  color for your apps main theme, and include extended colors for  semantics or even brand colors.

We include in the description,  accessibility checks, to make sure that your colors will look good  on a variety of different situations.

You can update the color live in the color picker, and it will update these accessibility ratings.

Here, we have another example  of working with our design kit.

we can select it and make sure that we are mapped to it.

We suggest keeping the generated colors  that you have to ensure flexibility, the styles can be updated to reflect not only in Figma but can be exported  next time you open the plugin.

Building off Figma styles, token  and color system can be integrated with custom components and branding  styles with ease for cohesive color story and weve only painted in the picture for color  here, but dont forget about typography.

We highly encourage you to express  your brand through type, and Material Design tokens are here to help.

A baseline type scale in Roboto is  generated along with the color scheme, and they are connected to styles with  the appropriate Material Design tokens  ready to be customized.

I highly recommend anything from Google Fonts,  which can easily be implemented  in your Android app.

So lets see this in action.

So one more time, lets go with the design mocks.

Weve now iterated through  multiple mocks to visualize  how dynamic color will we impact the UI.

Weve created a custom theme, and have wonderful semantics of how the colors are used, plus added custom type.

and theyre all ready to be  shared with your development team.

We wanted to make it easy and  allowing you to easily migrate,  so we introduced code export.

This provides developers an easy access to be able to export the design  tokens and integrate it in their apps today.

This is made to work with our current  versions of Material Components.

So, in conclusion, both dynamic and branded themes  with Material You allow you to build beautiful, expressive apps with color  that reflects users choice, and tokens that help the developers  and designers collaborate.

We are so excited to see what you build.

We will be releasing the Material Theme Builder as an update to the Material Design Kit  at this years Android Developer Summit.

Keep following us on Twitter for more information, and follow us @rodydavis and @margeeta. Thank you!