MUI for Sketch

(17 customer reviews)

$69.00

Quantity Discount (%) Price
1 — $69.00
2 - 4 7.25 % $64.00
5 - 9 28.99 % $49.00
10+ 43.48 % $39.00
Category:

Description

A large UI kit with over 1,200 handcrafted MUI symbols for Sketch.

Includes

  • 1,200+ 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
  • 20+ screens with component and style guide documentation
  • 2 examples of screens designed with the kit
  • 1 year of updates
  • Smart Layout
  • Color Tints

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 Sketch 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

The following video demonstrates how the symbols can be used to design an invoice page.

You can preview all the components, screens, layouts, and styles available in the UI kit with the light mode preview (it also comes with dark mode but not in the preview).

Features

A comprehensive component inventory for Sketch

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 Smart Layout which makes them scalable and adjustable. Convenient naming optimized for Sketch allows you to quickly find and use the desired component.

components

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.

theme

Save hundreds of hours

The UI kit was built for MUI and optimized for Sketch. 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.

icons

Built exclusively for Sketch

The kit takes advantage of all the features of Sketch.

Handcrafted to perfectly match the code ✨

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

Blog post

Introducing MUI for Sketch

Details

  • A minimum version of Sketch 64.0 is required.
  • 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 contributing changes to the designed screens that use the UI kits. No licenses are required for viewing the designs.

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?

Unfortunately, Figma doesn’t work like an npm package where you can simply update your dependencies to access the latest features. The file is standalone.
Most of the time, we don’t make breaking changes in the updates, but rather we add new content. You can decide whether or not it’s worth the effort to integrate the new content into your existing file.

If you replace existing symbols of your library, you should get a “Library updates available” button and an “Update Components” confirmation window, for each symbol update.

Sketch or Figma?

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.

17 reviews for MUI for Sketch

  1. Olga Vignard (verified owner) –

    —
    dimension: design-quality
    —

    Great library, I am a PM with average UI skills and this allow me to quickstart my new project much faster. Easy to use!

  2. John Lyon-Smith (verified owner) –

    —
    dimension: design-quality
    —

    Great set of components. Bit on the pricey side, but does the trick.

  3. Walter Vargas-Pena (verified owner) –

    —
    dimension: design-quality
    —

    This has everything you need to quickly get started prototyping. If you’re usina Material-UI its a no brainer.

  4. Taylor Cronin (verified owner) –

    —
    dimension: flexibility
    —

    I’m a PM at a startup and needed to start building designs for the devs quickly. Considering I am not a designer, this really allowed me to get high-quality, dev-ready designs very quickly. There’s a very slight learning curve, but nothing you can’t figure out in a day if you have some experience with sketch. The documentation is very helpful as well. 10/10 Material UI!

  5. Satriadi Kurniawan (verified owner) –

    —
    dimension: design-quality
    —

    I have been using several paid versions of starter kit , for UI material, this is the best.

  6. Chris Leyva (verified owner) –

    —
    dimension: design-quality
    —

    If you’re team is using Material-UI like we are, this is a MUST. Build out your product knowing that your designs will match the same components your devs will use for a pixel perfect delivery.

  7. Debbie Seusy (verified owner) –

    —
    dimension: customizability
    —

    I had been designing with Google’s Material kit for Sketch (an awesome and free product, by the way) but my dev team is going with REACT’s Material-UI and I wanted to be sure what I drew would be a match. So far so good, although I am in the early stages. I would say that I wish there were more states for all of the items – Google’s Sketch kit includes hover states, click states, etc. And more icons! I am having to use mostly the icons provided in the Google Material UI kit I had already installed.

    • Olivier Tassinari –

      Thank you for the feedback. We have released v4.11.0 that covers a lot more states.
      Regarding the icons, you can find over 1,000 icons for 5 different types (filled, outlined, rounded, sharp, and two-tone) in the same archive as the main Sketch file (so over 5,000).

  8. Yuliya Akhtsiamava (verified owner) –

    —
    dimension: design-quality
    —

    Thank you for adding some parts which were missing in google’s kit (especially for tables! that’s lit) and for great work with symbols, much appretiated. However, there are some elemets missing (mainly disabled styles). But I hope you guys are working on it and expand the lib slowly.

    • Olivier Tassinari –

      Thank you for the feedback. We have released v4.11.0 that covers a lot more states.

  9. Mario Merino (verified owner) –

    —
    dimension: design-quality
    —

    Its a good starting point yet several variants of the components are missing

    • Olivier Tassinari –

      Thanks for the feedback. We have released v4.11.0 that covers a lot more states.

  10. Andrew Nenakhov (verified owner) –

    —
    dimension: other
    —

    Nice set, but I’d prefer it to have more ready samples of frequently used components with symbols already in place. Like dialogs with radio buttons inside, etc

  11. Patrick Dryburgh (verified owner) –

    —
    dimension: bugs
    —

    Overall an excellent tool for quick prototyping. Unfortunately, the tinted groups do not work correctly in sketch.cloud, resulting in the wrong colour being used for things like primary buttons.

    • Olivier Tassinari –

      The issue should have been fixed in v4.13.0.

  12. Katherine Garrigan (verified owner) –

    —
    dimension: code-quality
    —

    This is a great tool to spin things up quickly — but it exports poorly to any tools we need to share with developers. So poorly that it’s unusable to get hi-fi wireframes done quickly without tearing the library apart.

    • Olivier Tassinari –

      Thanks for the feedback, and sorry that you weren’t able to use this with Zeplin. The issue should have been fixed in v4.13.0.

      As discussed, the symbols were implemented in Sketch using a “master symbols” approach: https://medium.com/ux-power-tools/a-better-way-to-make-buttons-in-sketch-6c23470f27c. Since it appears to be an issue with Zeplin, we would suggest reporting it to them, or perhaps trying a different hand-off solution, such as Sketch Cloud or InVision.

  13. Andrew Bacon (verified owner) –

    —
    dimension: design-quality
    —

    Really well made sketch library, easily worth the money. I’m making changes of course, but this saved my team probably 70 hours of work.

  14. Will Squire (verified owner) –

    —
    dimension: customer-support
    —

    I like it. It’s not perfect, but it’s getting there and these guys are always on it when stuff comes up. Saves time for sure. One thing I would say is that for those devs that contribute or have helped add value in some way to MUI, it might be nice to get access to this on an open source license.

  15. Mike Zou (verified owner) –

    —
    dimension: customizability
    —

    The quality of the libraray is great. Thanks Material-UI team for working on this. However, I have some questions regarding customization. Say we have different projects that have different colors and themes, what is the best way to customize them in Sketch? Since the Material-UI symbols are imported as a library, if we change the colors, it will affect all projects that are importing the libraray. We tried tools like Camilo but it is not a smooth experience. It would be nice that Material-UI team can document an “official” solution since I belive this is a common use case. The other question is how to leverage this library for wireframing. We have been using the dark libraray so that there is no colors to confuse the developers that they understand this is just wireframing, but still there are different kinds of buttons, for example, making the wireframing process not too effecient. It would be appreciated if there is a wireframing library provided with simplified symbols as well besides light and dark libraries. Just some suggestions. Thanks again for the great work.

  16. Dejan Siedle (verified owner) –

    —
    dimension: design-quality
    —

    The quality of the library is good but i must admit it was more easy to work with version 4. Within version 5 you are missing the cards. Are they comming back?

  17. primordius (verified owner) –

    —
    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

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

Only logged in customers who have purchased this product may leave a review.

Vendor Information

Related products