Material Theme Builder

About this plugin

Type theming is here!

Now you can customize your fonts along with color.

* Playground file added with instructions and color schematic! Try it out by clicking Open In… + Playground file*

The Material Theme builder is built to assist in exploring the possibilities of dynamic color, harmonizing brand colors, and customizing a type scale. All with implementation in mind to bridge designer and developer workflows.

⚠ Surfaces 1–5 will remain in the builder for current users, but we recommend migrating to new surface tokens as soon as possible. Fixed accents add a new set of colors that will remain consistent across light and dark themes.⚠

File Bugs Here:

https://github.com/material-foundation/material-theme-builder/issues/new/

How to use:

Setup and explore color

1. Run by searching for Material Theme Builder within Figma plugin search and click Run or Open in… from the Community page. + Playground File will add a playground file within your drafts.
2. With the plugin open click Create Theme to generate a theme (material-theme) and Material Design tokens as Figma styles.
3. Using design kit components? Turn on State Layers within settings, this will generate needed state layers when customizing the theme.
4. Assign MD tokens (Figma styles) to custom elements and components, then swap to the currently selected theme.
5. Select elements that have styles assigned and Swap to update the theme used in the components.

Create a custom theme

Your brand’s colors can still take advantage of the Material You color story without dynamic color controlling the UI with the help of some resources. Colors will be shifted to generate accessible colors within the same color space as dynamic colors.

Extended Colors

1. To extend past user-generated dynamic colors or add semantic colors. Click Add a color. A color input will appear and update the color schematic. 
2. Click on the color input to prompt a color picker to update the color. 
3. To rename a custom color, update the name within the text input and click outside the input when done.
4. Delete by clicking on the trash can icon.

Add theme and presets

You can change the current theme, add a new theme, and reset the current theme within the Theme menu (dropdown at top). 

Selecting a different theme changes the current theme to edit. Swap will update whatever is selected to the current theme in the dropdown. 

Presets are available in the menu to reset the current theme back to the Material baseline theme. 

Type theme

Font family can now be customized from the plugin.

1. Select the Type tab icon in the tab bar.
2. Select the Display, Headlines, & Titles dropdown. You are able to search and select a Google Font to customize the display, headline, and title categories.
3. Select the Body & Labels dropdown. You are able to search and select a Google Font to customize the body and label categories.

Export

Ready to implement your theme? Click Export and select your desired code format. 

Learn about themes and migrating to M3 or try out implementation with Adding dynamic color to your app codelab and Customizing Material color lab. 

Learn more about the Material Theme Builder material.io/material-theme-builder

Suggestions or feedback? Ping us @materialdesign on Twitter.