Material UI for Figma

Enhance designer-developer collaboration between Material UI and Figma.

Getting started

Material UI for Figma consists of representations of the library's React components in Figma so designers and developers can communicate and iterate more efficiently. This Design Kit includes:

components with the same design as Material UI
additional components and features not covered by Material Design
shared terminology from the React library for props, variables, design tokens, and other values

Community vs. full version

The Material UI design kit is available in the community (free) version and the full (paid) version.

	Community	Full version
Components without customizations	All	All
Components with customizations	4	All
Figma variables	-	✅

Installing the full version

Start by extracting the .zip archive which contains the .fig files. Then you can either follow Figma's import guide or add it to your team library.

Changelog

Visit the Releases tab on GitHub to keep track of new design kit versions.

The design kit uses Figma's local variables to create a collection of styles comparable to the theme structure of Material UI code. Follow the steps in the video below to see all the variables available:

Customizing colors

Use the variables panel to customize colors as shown in the video below:

Customizing typography

Typography customization uses local styles rather than local variables. The experience is similar to modifying colors, as shown in the video below:

Switching between light and dark modes

The design kit uses Figma's local variables to let you toggle the variable mode between light and dark, as shown in the video below:

Components

Editing the main components

You can use the Similayer plugin to select multiple components at once that share some property.

Table component

Adding new columns

The video below shows how to add new columns by detaching cells from their row components, allowing you to freely move content around.

Adding new columns in the main component

The Table and Data Grid components come with a limited number of columns by default. The video below shows how to add new columns by copying cells directly on the main component:

Code sync (beta)

You can export theme tokens and component customizations to code using the Sync plugin for Figma. The Design Kit has been built to be as close to the React components as possible, making it for a fluid integration with code.

Learn more about the Material UI theme structure by visiting the Theming and Default theme viewer pages.

Using new design kit versions

We generally don't release breaking changes in the updates—we add new content instead. If you need to replace a single component that's been updated, there are a couple of options:

Add the new version of the design kit as a library and use the new Figma library swap feature. The components must have the same names in both libraries.
Observe the new component and re-apply the changes to the existing projects. This is the recommended approach when you need to update multiple projects.
Copy and paste the new component into your existing project, give it a different temporary name, then re-link tokens to the new component. When using Select Similar plugins this shouldn't take more than five minutes. Then you can remove the old component and update the new component name.

Feedback and bug reports

If you've got any feedback, we'd love to hear from you.