Skip to content
Influence Material UI's 2024 roadmap! Participate in the latest Developer Survey
+

Design resources

Be more efficient designing and developing with the same library.

Design kits

Material UI component designs are available for Figma, Sketch, and Adobe XD, providing accurate representations using shared terminology for all states, variants, and permutations of each component.

The design kits are composed of over 1,500 unique elements built to speed up the development process and ease communication for teams of designers and developers using the library.

Figma logo

Material UI for Figma

Sketch logo

Material UI for Sketch

Adobe XD logo

Material UI for Adobe XD

Connect Figma plugin

Connect is a Figma plugin to help bridge the gap between designers and developers using Material UI.

It generates a theme file that you can add to your codebase with all the design tokens and component customizations from Figma. You can quickly preview all of the changes through an embedded Storybook panel directly in the plugin interface.

Connect is currently in beta and available for free in the Figma Community. Head over to the Connect page to learn more.

Customizing the Material UI Switch component in Figma with the Connect plugin running.

Third-party resources

UXPin

Material UI for UXPin: A large UI kit of Material UI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment.