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. The 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.
Theme
Local variables
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
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.