A Figma plugin that lets you generate a theme from the Material UI Design kit for Figma.
MUI Connect is a Figma plugin that lets you generate a theme from the Material UI Design kit for Figma. You can customize both design tokens and components, generate a theme JSON, and see your changes from an embedded Storybook instance.
:::warning The plugin is in beta and doesn't currently support customization to all Material UI components. :::
The MUI Connect Figma plugin only currently works on the Material UI Design kit. It doesn't support other kits, such as Joy UI, at the moment.
Test the plugin by starting with the Community version. Then, visit the Store to get access to the complete version with all of the Material UI components.
Once you've installed it, go to your copy of the Material UI design kit, click on the "Resources" button, go to the "Plugins" tab, and then click on "MUI Connect".
Design tokens consist of the styles that are defined through Figma's "local variables" and "local styles" features.
The Material UI design kit comes fully loaded with design tokens that map out to the React library's default theme. MUI Connect can read all of the existing tokens in the theme.
To customize them, open the Local variables modal or one text style or shadow in the Local styles panel, and change their values. Then, open the plugin and click on "Generate theme". You should be able to see the modified tokens on the code and the Storybook preview tab.
Adding new tokens to the existing category of tokens supported (such as colors, shadows, typography, etc.) is also possible. Ensure you add the new ones within the corresponding category and click "Generate theme" again to see them in the code and Storybook.
You can also customize how a component looks and generate its theme code using MUI Connect. Currently, the only supported Material UI components are the Button, Switch, and Typography.
Use the MUI Design kits GitHub repository to open issues about bugs or feature requests for MUI Connect.