How to use Material 3 to kickstart a frontend project (with Figma and Next.js)

I use the Material 3 Theme Builder in Figma to kickstart my design and development process. Using this tool I am quickly able to generate a theme that I can use both in Figma and my Next.js project, here's how I do it.

Generating the theme in Figma

The Material Design team at Google has released "Material 3" which, as you might have guessed, is the third iteration of their open-source design system.

While the components and such are really cool, for this guide we are mainly interested in using the color system for designing and developing our website. I mainly use the components as inspiration, especially since they haven't been released for web at the time of writing. The color system consists of different tones and accents, making sure you have a color to select in any situation (as long as your design isn't too convoluted).

The Material Theme Builder

Google has created the "Material Theme Builder" tool for Figma. This tool allows you to generate a new theme or change an existing one. You can do this by using the dynamic or custom mode. The dynamic mode sticks completely to how color tones are generated for Material 3 and is the recommended setting. Using the custom mode, you can choose your own core colors to generate a theme using your own rules. This guide uses the dynamic mode. Using the dynamic mode you simply select a source color, which then generates a theme. This theme is then usable in Figma as can be seen in the below image:

Light and dark variations

The tool actually generates two themes, a light and a dark variation, both using the same source color you picked. Switching between these in Figma can be kinda hard since it isn't supported natively in the application. However, you can trust that the colors work just as well in the dark theme as they do in the light theme. There does exist plugins for Figma which allow you to switch themes, This is one of them.

Using the generated theme in Next.js

Once you have generated your Material 3 styles in Figma, you can use them to design your project. When it makes sense, you can start developing the project in Next.js or any other frontend framework of your choice.

Exporting the styling

You can export your generated theme in the Material Theme builder by using the export button and choosing CSS.

This results in a zip-file containing styles for your theme's color and text. If you unpack this file, it will result in a "css" folder with the necessary CSS stylings to develop a frontend that closely matches your design relatively easily.

Implementing the styling in Next.js

The following is a guide on how to implement the styling in a Next.js project. The project is default and blank for content. The guide also includes how to implement theme switching. To implement the styling, do the following:

1. Add all the CSS files to your project, in a folder that makes sense to you. In this example i've put the "css" folder in the app folder.
2. Import the theme.css file in your globals.css. Simply add @import url(css/theme.css); to import all the styles you need.
3. Remove the (prefers-color-scheme: ... attributes from the theme.css file. These do not work with the next-themes library we will be adding soon.
4. Change root in the theme files to be [data-theme='VARIATION_NAME']. Meaning for "theme.dark.css" you change ":root" to "[data-theme='dark']" and "theme.light.css" to "[data-theme='light']".
5. Add "next-themes" to your solution. "next-themes" makes switching themes on the fly easy for your users. Follow the documentation on how to add a Providers component to support this feature.
6. Update the "typography.module.css" file to fix fonts. At the time of writing, Next.js uses "Inter" as the default font. This is an issue, because the styling specifies "Roboto". So you need to make a choice: should I keep the "Inter" font or change it to "Roboto" to comply with the design. For this I would say switch to "Roboto" as it would take a while to change the font in the Figma design. To do this, you need to remove all the "font-family" styling in "typography.module.css" as it refers to "Roboto" in a way, that isn't intuitive to Next.js (it will be more clear shortly, hopefully).
7. Modify "layout.tsx" to correctly implement the "Roboto" font. To avoid being dependent on external sources, Next.js makes it easy for you to use Roboto, by supplying it for you. Simply remove the existing inter const and replace it with roboto like this:
   
   

   _10

   const roboto = Roboto({weight:["100", "300", "400", "500", "700", "900"], subsets:['latin']});

   
   
   Remember to replace the Inter reference in the body tag:
   
   

   _10

   <body className={`${roboto.className}`}>

   
   

That should take care of the base implementation. You are now ready to use the CSS styles provided by Material 3

Using the styles

The name of the styles in Figma correspond to the names in the generated CSS which you've added. To use the surface background color, simply use the surface CSS class. To use a certain text like "body/large" use body-large as a CSS class in a paragraph tag.

Switching between variations

Switching between variations is easy since you've added "next-themes". By using the useTheme() you retrieve an array that contains the setTheme() function. By then using setTheme('light') or setTheme('dark') you can allow users to set the theme of your website. You can for example hook up a button that toggles between the variations, like this:

Example project

I've created an example project which can be found here. This project is correctly set up like i've described in this article. You can use it to cross-reference if something isn't set up correctly in your solution.

Conclusion

This is the current way I set up my frontend projects. This is of course not for everyone, as I enjoy styling things myself and avoiding component libraries. By utilizing this method, I can rapidly create a unified design system for both my frontend project and Figma, allowing me to get started quickly.

I hope you were able to learn something that might help you. I write mainly about web development, so follow me for more articles in this vein. I'd love to learn about your website styling and development process, feel free to share it. Also, if you have any questions, feel free to reach out in the comments 🙂.