Design Tokens for the Material 3 Design Kit from Google.

This is a collection of design tokens for the Material 3 from Google derived from the Material 3 Design Kit Figma File.

How to integrate with your project

Tokens Studio

Import the tokens into your project using Tokens Studio. This will automatically generate the token sets and themes needed.

Figma

Open your Material3 file in Figma and the Companion by Tokens Studio Plugin. Authenticate with your Tokens Studio account, choose the project you want to import the tokens into, and click create. This will automatically generate the token sets and themes needed in your project.

FAQ

The Figma file is using styles instead of variables. How do I convert them to variables?

This is a manual process unfortunately. You'll need to select all nodes that are using styles and convert them to variables. We're working on a tool to help with this.

Future Work

There really needs to be a global palette file that other tokensets can reference. One day we'll generate this and create a new token set for it.