Description
A large UI kit with over 600 handcrafted MUI symbols for Figma.
Includes
- 600+ high-quality symbols – ready to use and customize – kept up-to-date with the React components (MUI Core and MUI X)
- 1,000+ icons grouped and named consistently with Material Design in 5 themes
- 100+ customizable color, typography, and elevation styles
- 50+ frames with component and style guide documentation
- 1 year of updates
- Figma variants
- Auto Layout
No matter what your role, you’ll be more efficient
UI / UX Designers
Save time using this large 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, design a beautiful, consistent, and accessible interface without relying on designers. You can preview how it will look before coding it.
The UI kit was created specifically for MUI, a popular React UI library with a comprehensive set of components. MUI has over 3M+ active users and 85k+ stars on GitHub!
See it in action
You can copy the community version of Material UI to play with some of the components, screens, layouts, and styles available in this UI kit. You can also preview the full version of Material UI and Joy UI.
See the overview of the latest release v5.11.0:
Features
A comprehensive component inventory for Figma
The UI kit contains all the MUI components with states and variations which gives 1,500+ unique elements. All components are designed with the most up-to-date release.
The elements use Auto Layout which makes them scalable and adjustable. Convenient naming optimized for Figma allows you to quickly find and use the desired component.
Apply your product branding in minutes
The whole Material Design theme is ready to use and customize. The styles depend on shared variables which makes them easily customizable and consistent. The kit includes the whole 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
The UI kit was built for MUI and optimized for Figma. Save hundreds of hours and use the MUI React library to bring your products to life.
A large icon library โน๏ธ
1,000+ material icons in 5 themes (filled, outlined, rounded, sharp, and two-tone), grouped and named accordingly. You can reuse icons throughout the whole UI Kit in components because everything is connected together.
Built exclusively for Figma
The kit takes full advantage of the features of Figma.
Handcrafted to perfectly match MUI โจ
Avoid surprises. What you design is what you get in production, with high reliability and consistency.
Documentation
Head to https://mui.com/figma/getting-started/.
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 noticed 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.
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 suppord expires: you get aย 50%ย discount compared to the item price.
- up to 60 daysย after the support has expired: you get aย 25%ย discount compared to the item price.
- more than 60 daysย after the support has expired: you get aย 10%ย 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 contributing changes to the designed screens that use the UI kits. No licenses are required for viewing 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 UI 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 or Adobe XD?
We aim to keep feature parity between the Adobe XD, Figma, and Sketch kits. 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.
Ahmad Ihsan Zainuddin Georges (verified owner) –
—
dimension: design-quality
—
Alexey Kisets (verified owner) –
—
dimension: feature-availability
—
It’s good but some components are missing. For such price I would expect 100% exact replica of MUI with no exeptions.
Olivier Tassinari –
Thanks for the feedback. We have added the missing UI states in the v4.12.0 release :).
Kirill Razumovskiy (verified owner) –
—
dimension: flexibility
—
These components are best components on the market. I bought all material-ui Figma packages, and this one is the best one. Big advantage is that when you send this to your developer, for him it’s easier to create the code with MUI.
Paolo Furini (verified owner) –
—
dimension: customizability
—
The design quality is high, but the lack of Auto Layout and Variants makes even small customizations a pain. I currently use auto layout for all my designs, and to use the components in this kit I have to rebuild them from scratch by detaching Container components instances, and adding the various elements inside with auto layout. Please add Auto Layout and Variants support ASAP, because these are unique features that Figma users now expect to find in high quality kits. Thanks
Olivier Tassinari –
Thanks for the feedback. We have released v4.13.0 that brings support for Figma variants and improves auto-layout :).
Trenton Triola (verified owner) –
—
dimension: design-quality
—
This is the best $69 I’ve spent on my startup. I wish I had this kit when I first learned Figma. This kit is such a great equalizer for new and upcoming designers. The quality of the kit (v4.13) can’t be overstated: it’s got wonderful organization and the implementation of Variants is well executed. Support is prompt to respond with questions and comments. You won’t regret purchasing this bangin kit.
John Bishop (verified owner) –
—
dimension: bugs
—
Theme works great but some of the icons only show a blank box instead of the vector. I think this is due to a layer ordering issue where the bounding box is above the vector icon itself. Workaround is to turn off the bounding box, but all the icons should work plug and play. Only reason I dropped it from 5 to 4. Otherwise this has sped my designs up incredibly well and I am overall very satisfied with the library.
Olivier Tassinari –
Thanks for the feedback. We have taken care of the issue in v4.14.0.
Sana Kamal (verified owner) –
—
dimension: documentation-quality
—
Some of the Material colours are not updated with their code, for ex: A700, A400, A200, A100. Instead they were all replaced with 900 which got a little confusing. We had to go back to the website to cross check and then manually corrrect the Figma file. Overall, it’s really good and convenient. Please keep on updating it as seen fit.
Olivier Tassinari –
Thanks for the feedback. We fixed it in the v5.0.0 release.
corinne holmes (verified owner) –
—
dimension: design-quality
—
Colour libraries were not set up for most of the colour options available.
Olivier Tassinari –
Do you have more details on this pain?
ketil keiseraas (verified owner) –
—
dimension: feature-availability
—
No xgrid components wich was the reson that we bought Material-UI for Figma. The rest of the component you can find in other free Material UI kit for Figma
Olivier Tassinari –
Thanks for the feedback. The latest version of the kit v5.0.0 now includes the components of MUI X, alongside the ones of MUI Core.
yijie.zhou (verified owner) –
—
dimension: feature-availability
—
Will we have charts components soon?
Olivier Tassinari –
You can learn more about the state of charts by reading https://github.com/mui/mui-design-kits/issues/20.
Mark Thomassen (verified owner) –
—
dimension: feature-availability
—
Really great to have this kit… but it could have ALL the same components that live in the MUI component library and more examples using all the components. Drawers, snackbar, etc. The ANT Figma kit is deeper than this one. Please look at the templates that you can buy that use MUI and replicate all those controls and examples in this MUI Figma kit.
Olivier Tassinari –
Thanks for the feedback. We track this improvement opportunity in https://github.com/mui/mui-design-kits/issues/12.
Nicolai Hemdrip (verified owner) –
—
dimension: other
—
I bought it large because, I needed the datatables & tables. So, I was a bit dissapoinet that it was not so ellaborate in terms of features and reponsive. Like the prints, filter features are all missing.
Otherwise, seems like a good purchase.
Olivier Tassinari –
Thanks for the feedback. We have taken notes in https://github.com/mui/mui-design-kits/issues/48.
Gary Duke (verified owner) –
—
dimension: customer-support
—
The kit could use more clarity in the intended best method of using its components in Figma. Know that the Figma kit assumes expert-level in-depth knowledge and experience–something it perhaps should not do.
Customer support is responsive and excellent. A couple of the responses I got included concise .mov files on using grids/tables and creating more drawers. It’s nice to have this official MUI library and a high level of support. I am overall happy with the investment and looking forward to seeing this product improve.
Olivier Tassinari –
Thanks for the feedback. We are exploring how to add detailed documentation in https://github.com/mui/mui-design-kits/issues/9
stephane.bachelier (verified owner) –
—
dimension: design-quality
—
I’ve not tested everything in the UI kit so far but I can already see the benefits for me. I’ve been able to design the screens for a new project and it’s been really powerful. Now I’m ready to move to the implementation so I’ll able to see if this UI kit will help me to speed the implementation phase in a react project.
Diamond Alexander (verified owner) –
—
dimension: customizability
—
As a designer, I am really struggling with the theme. It would be great to provide more documentation on how the figma files differs from the MUI docs, and how to customize it. (I could see a really cool Figma plugin for this!)
For example, the ways colors are set up do not reflect the default theme for Material UI, especially in terms of opacaity. I want my design file to reflect things like hover or disabled state- do I need to go calculate 8% of my main color? How is this different from the tonal palettes (values 50-900) and light, dark and main versions of the primary color?
Also, the interactive components have really messed up some of my prototypes. It would be great to have an option without the interactions built in. I cannot seem to get rid of them, even when I turn it off in the main file. They interactions follow me to prototypes when used in a library. This causes my prototypes to break because the component interaction overrides the interaction of the instance.
Overall, I would expect a more thoughtfully designed file for designers that helps bridge the gap between dev and design when using MUI.
Olivier Tassinari –
Thanks for the feedback, we will see how we can incorporate it in the next release. A couple of notes
> It would be great to have an option without the interactions built-in.
It seems to be an issue with Figma, see https://forum.figma.com/t/switch-to-enable-disable-the-interactive-components-per-instance/4398/7.
> do I need to go calculate 8% of my main color? How is this different from the tonal palettes (values 50-900) and light, dark and main versions of the primary color?
You should be able to find the answer on Figma’s documentation.
Lior Krolewicz (verified owner) –
—
dimension: customer-support
—
This kit is the perfect balance of being for a designer and a developer – so its amazing to bridge that gap. Being a novice, I had many questions, most were answered by Adrian’s YouTube videos… I reached out to their support when struggled and couldnt find the answer, then Adrian responded with a recorded video of step-byste instructions of EXACTLY how to solve the problem. Amazing kit, outstanding custmer support! THANK YOU!
Ariel Odiz (verified owner) –
—
dimension: design-quality
—
Great resource. Awesome tool to have a seamless design to development handoff. Can’t wait for the update using Figma’s new component properties, that’ll be a game changer.
frontend.hal24k (verified owner) –
—
dimension: design-quality
—
It’s really saved me a lot of time wireframing thanks to all the variety of components
Umar Bacchus (verified owner) –
—
dimension: design-quality
—
taniguchi.naoki.mw (verified owner) –
—
dimension: feature-availability
—
This is a very good template. Really great!!!
I was having a very hard time creating a screen mock up of the MUI.
Specifically, I was struggling with the following
1. the sample source code is provided in the official MUI (React) documentation, but it is long and complex in any of the components, so the mock becomes a complex structure (even if it is just a storyboard!).
2. without sx props or styled components, it is not possible to place components in the intended position (e.g. changing the margin of the Menu in the combination of App bar and Menu).
By using this template, I can create mocks very easily and quickly. Thank you so much.
Other:
This may not be the kind of thing I would write here, but…
Regarding the samples in the official MUI documentation, it would be nice to have samples that are organized by page, which is often the case, in addition to the component-by-component ones.
(e.g., an example using only MUI.)
For example
– App bar + Drawer + Accordion + Table
(Maybe this is already in Showcase…)
Teemu Kumpulainen (verified owner) –
—
dimension: design-quality
—
A great idea and a good start, but unfortunately there’s too many inconsistencies to the actual MUI to be really useful. E.g. many color definitions in components are incorrect (as compared to MUI defaults). And the components are created in Figma in a bit old-fashioned way (rectangles as backgrounds, etc), so customizing is not as easy as it could be. Curious to see where this is going!
Olivier Tassinari –
Thanks for the feedback. If you could report these specific problem instances in GitHub issues or by email at figma@mui.com it would awesome! We want to fix them ๐
Kyril Shadrin (verified owner) –
—
dimension: design-quality
—
Useful as a reference but pretty hard to customize anything as some components are done in a weird and old-fashioned way.
Olivier Tassinari –
Thanks for the feedback. If you could report these specific problem instances in GitHub issues or by email at figma@mui.com it would awesome! We want to fix them ๐
Ilies Cristian (verified owner) –
—
dimension: design-quality
—
High quality library, makes designing so much faster. You just need to learn a bit how to use it efficiently at the beginning.
Yitong Zhao (verified owner) –
—
dimension: other
—
hope its a great tool!
Raphael Hyde (verified owner) –
—
dimension: design-quality
—
So far the library is very comprehensive although I think the library should have been broken into seprate sections so it could be indexed better. The icon groups are good but uploading took almost an entire day.
Greg Abaoag –
Thank you for the feedback. It would be awesome If you could report these specific problem instances in GitHub issues or by sending us an email at figma@mui.com! We want to fix them ๐
Travis Kempbell (verified owner) –
—
dimension: feature-availability
—
Immediate productivity booster. I’ve been using Material UI in React for a while but only recently started using Figma for designs (I have more of an engineering background than design, but I’m expanding my skillset). It didn’t take much time for me to realize how much I’d have to reinvent the wheel to get basic reusable components in Figma. After seeing a few demos online for this I decided to buy it. Within 5 minutes I could tell it was worth it.
Another amazing library from MUI.
Travis Kempbell (verified owner) –
—
dimension: flexibility
—
Immediate productivity booster. I’ve been using Material UI in React for a while but only recently started using Figma for designs (I have more of an engineering background than design, but I’m expanding my skillset). It didn’t take much time for me to realize how much I’d have to reinvent the wheel to get basic reusable components in Figma. After seeing a few demos online for this I decided to buy it. Within 5 minutes I could tell it was worth it.
Another amazing library from MUI.
Travis Kempbell (verified owner) –
—
dimension: design-quality
—
I’m more of an engineer than a designer and I’ve been using Material UI in React for a while. I’ve been expanding my skillset a little and working a bit more directly with the design process for various projects which seem to all take place in Figma these days (great tool as well). After seeing a few demos online and realizing how much I’d have to reinvent the wheel to get basic reusable components in Figma that just come out of the box with this library, I decide to buy it. Took about 5 minutes for me to conclude that it was worth it.
Another great library from MUI.
JINHO CHOI (verified owner) –
—
dimension: flexibility
—
์ฌ์ ์ ์์ํ๋ ์ด๋ณด ์น๊ธฐํ/๋์์ด๋๊ฒธ CEO์ ๋๋ค. ์๊ท๋ชจ ์ฌ์ ์ ์ค๋นํ๋ ๊ณผ์ ์์ Figma๋ฅผ ํผ์ ๊ณต๋ถํ๊ณ ๋์์ธํ๊ธฐ๊น์ง ์๊ฐ์ด ๊ฑธ๋ ธ์ต๋๋ค. ํผ์ ๊ณต๋ถํ Figma๋ก์ ๋์์ธ๊ณผ ๊ธฐํ์ ๊ฐ๋ฐ์์๊ฒ ์ ๋ฌํ๋ ๊ณผ์ ์์ ๋ง์ ๋ฌธ์ ์ ๊ณผ ์ํต์ด ํ์ํ์์ต๋๋ค. MUI for Figma๋ฅผ ๊ตฌ๋งคํ๊ธฐ ์ ๊น์ง๋ ๋ง์ด์ฃ . ์ ๋ ํฉ๋ฆฌ์ ์ธ ์ฌ๋์ ๋๋ค, ์ ๋ฌธ์ ์ธ ๋์์ด๋๊ฐ ํ์ํ ์ฌ์ ์ ์ค๊ฐ๊ณผ์ ์ด ์๋ ์ด๊ธฐ ์คํํธ์ ์ ๊ฒฝ์ฐ, ๋งค์ฐ ์ ์ฉํ๋ค๊ณ ์๊ฐํฉ๋๋ค.