---
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!
---
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...)
---
dimension: customizability
---
Bought it for the data grid component to display more than 100 rows per page at a time. Works great, fast, easy to use, and customisable. Only slight wrinkle was applying the license key in a JavaScript app that used Parcel. Took a bit of digging and refreshes to get the license key recognised and the watermark removed.
---
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.
---
dimension: feature-availability
---
The column handling MUI X Pro brings is really useful.
It gives your users the ability to view the data in a personalized way, a thing you can't do with MUI Base.
---
dimension: design-quality
---
I use this design kit to communication with developers. It helps developer faster apps when the developers know which componenets to use. I wish the kit had more icons. MUI has some many icons to uses but the kit only comes with 85 icons, as a designer we want more options but the developers want less.
---
dimension: design-quality
---
Data-Grid is an exceptional tables component. The only thing missing it's a better doc, but i'm sure will come later.
---
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!
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.
---
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.
---
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.
---
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.
---
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.
---
dimension: design-quality
---
Greatly reduced prototype develop time. There are a couple of components that don't work exactly the way I would like, but I can work around them.
Highly recommended
Teemu Kumpulainen –
--- 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!
taniguchi.naoki.mw –
--- 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...)
Paul Watson –
--- dimension: customizability --- Bought it for the data grid component to display more than 100 rows per page at a time. Works great, fast, easy to use, and customisable. Only slight wrinkle was applying the license key in a JavaScript app that used Parcel. Took a bit of digging and refreshes to get the license key recognised and the watermark removed.
Umar Bacchus –
--- dimension: design-quality ---
Olivier Tassinari –
Thanks for the feedback, we have created a new issue for this problem in https://github.com/mui/mui-design-kits/issues/76.
frontend.hal24k –
--- dimension: design-quality --- It's really saved me a lot of time wireframing thanks to all the variety of components
Ariel Odiz –
--- 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.
Olivier Biard –
--- dimension: feature-availability --- The column handling MUI X Pro brings is really useful. It gives your users the ability to view the data in a personalized way, a thing you can't do with MUI Base.
Hector Garza –
--- dimension: design-quality --- I use this design kit to communication with developers. It helps developer faster apps when the developers know which componenets to use. I wish the kit had more icons. MUI has some many icons to uses but the kit only comes with 85 icons, as a designer we want more options but the developers want less.
Apio –
--- dimension: design-quality --- Data-Grid is an exceptional tables component. The only thing missing it's a better doc, but i'm sure will come later.
Lior Krolewicz –
--- 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!
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.
Diamond Alexander –
--- 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.
stephane.bachelier –
--- 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.
Olivier Tassinari –
Thanks for the feedback. We are exploring how to add detailed documentation in https://github.com/mui/mui-design-kits/issues/9
Gary Duke –
--- 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 have taken notes in https://github.com/mui/mui-design-kits/issues/48.
Nicolai Hemdrip –
--- 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, feel free to report how you would like the components to behave exactly as you wish as a new GitHub issue.
primordius –
--- dimension: design-quality --- Greatly reduced prototype develop time. There are a couple of components that don't work exactly the way I would like, but I can work around them. Highly recommended