MUI for Figma

A comprehensive UI kit with over 600 handcrafted Material UI, MUI X, and Joy UI components for Figma.

Includes

• 600+ high-quality components—ready to use and customize—kept up-to-date with the React component libraries (Material UI, Joy UI, and MUI X)
• 1,000+ icons grouped and named consistently with Material Icons in 5 themes
• 100+ customizable color, typography, and elevation styles
• 50+ frames with component and style guide documentation
• Use of Figma's latest features, such as variants, auto layout, and token variables
• 1 year of updates

Documentation

Head to https://mui.com/material-ui/design-resources/material-ui-for-figma/

No matter what your role, you'll be more efficient

UI / UX Designers

Save time using this comprehensive library of UI components, icons, and styles to deliver your work faster. You can customize the kit however you want to match your product's brand.

Product managers / Entrepreneurs

Create MVPs efficiently and save hundreds of hours on UI design. This is a great place to start if your product or brand needs a design system. Equip your team with this library for Figma and build consistent products faster.

Developers

Gain autonomy and design beautiful, consistent, and accessible interfaces without relying on designers. You can preview how it will look before coding it.

This Design Kit was carefully crafted to follow the patterns available on the following React UI libraries: Material UI, MUI X, and Joy UI. Together, they have over 3M+ active users, and Material UI alone has 90k+ stars on GitHub!

See it in action

You can copy the community version of Material UI and the community version of Joy UI to play with some of the components, screens, layouts, and styles available in this kit.

You can also preview the full version of Material UI and Joy UI.

If you want a walkthrough of the content of the kit, you can watch:

If you want a mini tutorial on how you can use the kit, you can watch:

Features

A comprehensive component inventory for Figma

This Design Kit contains all the Material UI, Joy UI, and MUI X components with states and variations, summing up to 1,500+ unique elements. All components are designed based on the most up-to-date release.

The elements use Auto Layout, which makes them scalable and adjustable. Convenient naming optimized for Figma lets you quickly find and use the desired component.

Apply your product branding in minutes

The Material Design theme is ready to use and customize. The styles depend on shared variables, which makes them easily customizable and consistent. This Design Kit also includes the Material Design color palette. Change font and color styles to match your product branding in minutes.

Everything is documented for developers, so you don't need to worry about creating all states and docs yourself.

Save hundreds of hours

This Design Kit was built for the Material UI, MUI X, and Joy UI libraries and optimized for Figma. Save hundreds of hours and use the React libraries to bring your products to life.

A large icon library ℹ️

1,000+ Material Icons in 5 different variants (filled, outlined, rounded, sharp, and two-tone), grouped and named accordingly. You can reuse icons throughout the kit in components because everything is connected.

Built exclusively for Figma

This Design Kit takes full advantage of the latest Figma features, such as variants, auto layout, and token variables.

Handcrafted to perfectly match the code ✨

Avoid surprises. What you design is what you get in production, with high reliability and consistency.

Details

• The item is brought to life by Devias IO.
• You can find our public roadmap of what will come next.
• Don't hesitate to open new issues if you notice improvement opportunities.

FAQ

What long-term support do you offer?

The license is perpetual – once the kit is downloaded, it can be used forever. It's a one-time payment with no automatic annual subscription. However, access to updates and support is limited to 1 year.

Is there a discount for renewals?

Yes, a discount is available for renewal. The cost of the renewal depends on when you purchase it, If you purchase the renewal:

• before the support expires: you get a 50% discount compared to the item price.
• after the support has expired: you get a 25% discount compared to the item price.

How many licenses do I need?

The number of licenses purchased must correspond to the maximum number of editors working concurrently in a 24-hour period. An editor is somebody who contributes changes to the designed screens that use the kit. No licenses are required to view the designs.

How do I install the kit?

The first step is to extract the archive. This should give you a couple of .fig files. Then, you can follow the Figma help center article to either import it or add it to your team library.

The kit got an update. How do I get it?

We'll send you an email when a new release is available.
You can access the item on the download page of your store account. You can find a detailed description of the changes under the "Changelog" tab on this page.

I got the latest update of the kit. What should I do with it?

Figma or Sketch?

We aim to maintain feature parity between the Figma Kit and Sketch Kit. You can benefit from the renewal discount when switching to a different design prototyping tool.

Do you offer discounts to educational or non-profit organizations?

Yes, we offer a 50% discount on all products licensed to students, instructors, non-profit, and charity entities. This special discount cannot be combined with any other type of discount.

To qualify for the discount, you need to send us a document clearly indicating that you are a member of the respective institution. An email from your official account which bears your signature is sufficient in most cases.

For more information on how to qualify for this discount, please contact sales.