Material Theme Builder

  • Home
  • /
  • Material Theme Builder
Material Theme Builder

* Playground file added with instructions and color schematic! Try it out*

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

Generate accessible light and dark color schemes from a user’s device wallpaper or in-app content. Build a custom Material Theme, allowing you to migrate to Material Design 3’s new color system, and export it to code.

⚠ The latest update introduces Surfaces based on tone values, these are no longer read-only overlays. 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:

Material Theme Builder How to use:

Setup and explore dynamic color

  1. Run by searching for Material Theme Builder within Figma plugin search or Try it Out from the Community page (will create a new file).
  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. Select and Swap to update the theme used in the components.
  5. Assign MD tokens (Figma styles) to custom elements and components, then swap to the currently selected theme.

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.

  1. With Custom selected, select the color input for Primary.
  2. A full scheme can be generated from Primary or input your available brand colors into the rest of the color inputs in their appropriate color assignments.
  3. Color style properties will now export. Meaning exact color values can be set in style properties and then exported in theme files.

Dynamic color

  1. With Dynamic selected, drop an image in or click to choose an image to derive key colors into a scheme from an image. Below the image the source color will update based on the image. The theme’s colors and any elements or components using the theme will update based on the image.
  2. Or enter a source color manually to emulate inputting an image.
  3. Don’t want to choose an image or color? Randomize the source color with Shuffle.

Extended Colors

  1. To extend past user-generated dynamic colors or add semantic colors. In Dynamic or Custom, 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. 

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.

Show less

I hope you guys like it!

UI Mockup kit

If you have any query contact us – ITO Digital Agency

  • Author: Material Design
  • Categories: Templates
Share

Items you may also like

UI Design System
Dashboard

A UI Design System is a collection of reusable components, patterns, and guidelines that are used to create cohesive and consistent user interfaces. It provides...

Cryptocurrency Landing Page
Landing Page

In the competitive world of cryptocurrency, a well-designed landing page can be the difference between attracting potential investors and losing their interest. Whether you're launching...

Coke Design Concept
Mobile

The Coke Design UI Kit is a meticulously crafted collection of UI elements, including buttons, forms, icons, navigation bars, and much more. Developed with a...

Ultimate Icon Pack
Icons

The Ultimate Icon Pack: Elevate Your Designs with a Sea of Stylish Icons Icons are the unsung heroes of design. Those tiny visual elements can...

Dynamic components & Variants
Templates

Dynamic Components & Variants: Power Up Your Design System Introduction Designing user interfaces requires efficiency and consistency. But how do you achieve this when projects...

3D Icon Set
Icons

Level Up Your Marketplace & SEO with Stunning 3D Icon Sets In today's digital marketplace, grabbing attention and conveying information quickly is crucial. Here's where...

Real Estate SaaS Web and Mobile UI Kit
Landing Page

Building Your Real Estate Empire: The Power of Real Estate SaaS Web and Mobile UI Kits The real estate industry is undergoing a digital revolution....

NFT Marketplace Web UI Kit
Dashboard

Dive into the Metaverse: Building Your Dream NFT Marketplace with a Web UI Kit The NFT (Non-Fungible Token) market has exploded in popularity, creating a...

CRM Dashboard & Landing page UI Kit
Dashboard

Streamline Your Sales & Marketing: Boost Efficiency with a CRM Dashboard & Landing Page UI Kit In today's competitive business landscape, having a strong Customer...

LInkedin UI Design Kits
Mobile

LInkedin UI Design Kits Free are collections of pre-designed elements, such as buttons, icons, fonts, and color schemes, packaged together to facilitate the creation of...

Mobile Ecommerce UI Kit
Mobile

Redefining Home Decor Shopping: The Power of Mobile Ecommerce

Mobile

The Rise of Mobile eWallets: Transforming the Way We Pay Convenient and Secure Transactions: Gone are the days of carrying bulky wallets or worrying about...

Air Flight UI KIT
Mobile

How the Air Flight UI Kit revolutionizes the flight booking experience, making travel planning a breeze.

ZenSocial Dashboard
Dashboard

The key features and benefits of ZenSocial Dashboard, empowering you to optimize your social media strategy with ease.

Journal App
Apps

Discover the convenience and power of journaling with our innovative journal app. Organize your thoughts, memories, and goals effortlessly across all your devices. With robust...

In this blog post, we'll explore a free modal upload files kit that includes four distinct modes, each designed to cater to different user needs.

Profile UI Kits
Templates

Key Features of Tbean's Profile UI Kits: Customizability: Tbean's Profile UI Kits are designed with flexibility in mind. Developers and designers can easily tailor the...

Free No-code SaaS Website
Illustrations

In conclusion, the Free No-Code SaaS Website UI Kit for Framer and Figma is a game-changer for designers and entrepreneurs looking to create stunning websites...

Hands
Illustrations

The Hands Collection isn't just another set of illustrations—it's a meticulously crafted library of 3D models that capture the intricacies and nuances of human hands....