Enhance designer-developer collaboration between Material UI and Figma.
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 Material UI design kit is available in community (free) and full (paid) versions. Here's what you can expect from each:
| Community | Full version | |
|---|---|---|
| Components without customizations | All | All |
| Components with customizations | 4 | All |
| Figma variables | - | ✅ |
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.
When opening the local variables panel for the first time, you will see this:
To access the rest of the props, navigate to the variable collections, similar to the code's theme structure.
Then, follow the steps shown in the video below:
The design kit uses variables, meaning colors can only be modified from the variables panel. To access it, make sure you don't have any layers or frames selected so you can view the global right-hand panel.
<iframe width="100%" height="490" src="https://www.youtube.com/embed/YuzkWFm0-bA?si=XvgPR0vNGtiBPqKY" title="YouTube video player" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe>Unfortunately typography variables are not currently supported, but this feature is planned. Until then, changing global styles such as the font family requires a few minutes of extra effort. We have already defined everything as a style, so your only point of command is the right-hand panel.
<iframe width="100%" height="490" src="https://www.youtube.com/embed/HepVDfrLmak?si=gklG_3ZZyxDWzlPM" title="YouTube video player" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe> <iframe width="100%" height="490" src="https://www.youtube.com/embed/ydTF1HhLnJM?si=1Fj4CFLgVavfg4Fz" title="YouTube video player" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe>You can export theme tokens and component customizations to code if paired with the Connect Figma plugin. Material UI for Figma has been built to be as close to the React components as possible, making it for a fluid integration with code.
The Material UI for Figma design kit components are as close as possible to the actual React components. Both use the same names, design tokens, and default values. We recommend using design tokens as much as possible to perform component customizations, because it's easier to share the values from Figma to React.
:::info
A design token is any variable that can be shared with the React implementation—for example, the font size pixels of the body2 variant.
:::
Learn more about the Material UI theme structure by visiting the Theming and Default theme viewer pages.
Master components were difficult to maintain, and it required sticking to the elements available in that master instance only, so we decided to move away from master components in favor of a plugin called Similayer.
<iframe width="100%" height="490" src="https://www.youtube.com/embed/eHBk0FbS0P8?si=QbOiMU2F1yvGB6s8" title="YouTube video player" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe>Material UI is an independent React implementation of Material Design. It fills the gaps in Google's design system with the MUI team's expertise in web development best practices.
Anyone interested in Material Design can benefit from the Material UI for Figma library, but it is particularly great for designers who work with developers using the Material UI React library. The way the components (as well as properties and variables) are structured in Figma is meant to closely mirror what you'd experience in the code.
In Figma, you will see:
- extra components and features that aren't covered in Material Design
- the same UI output as Material UI
- shared terminology for props, design tokens, and other values
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.