How to generate a Material Design 3 theme

If you're a UI/UX designer or developer working with Material 3 (M3), the Material Theme Builder is an essential tool for creating beautiful, consistent design systems. Whether you're building a theme from scratch or updating an older one, this tutorial will guide you through the basics—using both the web version and the Figma plugin.

What Is the Material Theme Builder?

The Material Theme Builder helps designers explore the power of Material 3’s dynamic color system or build completely custom themes. You can:

• Generate light and dark color schemes

• Add semantic and extended colors (like "warning")

• Visualize UI screens with real wallpapers or brand colors

• Export your theme tokens and styles.

Using the Web Version

Start by visiting m3.material.io/theme-builder.

From there, you can:

• Preview themes by selecting example wallpapers or uploading your own

• Switch between light and dark modes

• Build custom themes by adjusting core colors with the HCT (Hue, Chroma, Tone) color space

• Add extended colors (e.g., semantic colors for error or warning states)

• Export your fully configured theme for use in your app or design system

The Figma Plugin

In Figma:

1. Open a new or existing file.

2. Go to Resources → Plugins → Material Theme Builder.

3. Run the plugin and click Create Theme.

4. Enable options like Generate styles and State layers, depending on your use case.

The plugin allows you to:

• Generate dynamic color schemes based on a seed color

• Upload images or use brand colors as the color source

• Use color match to stay aligned with brand guidelines

• Add extended colors with harmonization

• Swap between existing themes or update old ones

• Export your theme or even convert your design for Webflow or Framer

If you’re working from a playground file, launching the plugin there will auto-generate color schematics for you. This is a great way to test ideas quickly.

Updating Older Themes

Have a theme built with an older version of the plugin? No problem. The plugin detects legacy styles and gives you the option to update them for full compatibility with the latest M3 tokens and color logic.

Watch the full walkthrough video above for a visual guide through every step.

Get the Free Neogenix Figma template here

AI disclaimer:

This article contains original content. However, AI may have been used to generate content from transcripts or to correct the grammar, spelling, and formatting of existing content.