Skip to main content

​
Design Kits

Material UI component designs are available for Figma and Sketch, 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

The Material UI Figma design kit provides:
  • All Material UI components with accurate styling
  • Support for theming and variants
  • Auto-layout and responsive design features
  • Regular updates matching library releases
Get the Figma kit →

​
Sketch

The Material UI Sketch design kit includes:
  • Symbol libraries for all components
  • Text and color styles matching the default theme
  • Nested symbol overrides for customization
  • Shared libraries for team collaboration
Get the Sketch kit →

​
Adobe XD

The Material UI Adobe XD kit features:
  • Component states and variants
  • Responsive resize options
  • Design tokens and color systems
  • Component documentation
Get the Adobe XD kit →

​
Material UI Sync Figma plugin

Sync 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. Sync is currently in beta and available for free in the Figma Community.

​
Key features

  • Design token export - Export colors, typography, spacing, and more
  • Component customization - Export component style overrides
  • Live preview - See changes in Storybook instantly
  • Code generation - Generate ready-to-use theme code
  • Two-way sync - Keep design and code in sync

​
Getting started with Sync

  1. Install the Material UI Sync plugin from Figma Community
  2. Open your design file and run the plugin
  3. Customize your theme using the plugin interface
  4. Export the generated theme code
  5. Add it to your project and see the changes

​
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.

​
Framer

Material UI components are available in Framer through community packages:
  • Pre-built component library
  • Interactive prototypes
  • Code export capabilities
  • Responsive design tools

​
InVision

Community-created Material UI libraries for InVision Studio and InVision DSM:
  • Craft plugin integration
  • Design system management
  • Collaboration features
  • Version control

​
Icons and assets

​
Material Icons

Material UI includes the complete Material Icons library:
  • 2,000+ icons across categories
  • Five distinct styles (Filled, Outlined, Rounded, Two-tone, Sharp)
  • Available as React components
  • Optimized SVG exports
npm install @mui/icons-material

​
Custom icon libraries

Material UI works seamlessly with popular icon libraries:

​
Design system tools

​
Storybook

Material UI components integrate perfectly with Storybook:
  • Component documentation
  • Interactive playground
  • Theme switcher addon
  • Accessibility testing

​
Chromatic

Chromatic provides visual testing for Material UI:
  • Visual regression testing
  • UI review workflows
  • Component library publishing
  • Automated testing

​
zeroheight

zeroheight helps document your Material UI design system:
  • Living style guides
  • Design token documentation
  • Component usage guidelines
  • Collaboration tools

​
Learning resources

​
Design courses

​
Community resources

Build docs developers (and LLMs) love

Get started for freeTalk to us