Material-UI for Sketch

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

Includes

  • 1,200+ high-quality symbols - ready to use and customize - kept up-to-date with the React components
  • 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 screen 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 Material-UI, a popular React UI library with a comprehensive set of components.

See it in action

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

Preview all components, screens, layouts, and styles available in the UI kit in light mode. You can also preview all the content in dark mode.

Features

A comprehensive component inventory for Sketch ๐Ÿ›

The UI kit contains all the Material-UI 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-UI 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 Material-UI and optimized for Sketch. Save hundreds of hours and use the Material-UI React Library to bring your products to life.

Material-UI is awesome - it has over 1M+ active users and 63,000+ stars on GitHub!

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 Material-UI โœจ

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

Blog post

Introducing Material-UI for Sketch

Details

  • A minimum version of Sketch 64.0 is required.
  • The item is brought to life by Devias IO.

FAQ

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.

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. To extend the support and get access to the newest versions for a further 12 months, you need to make a new purchase. We offer a 50% discount for license renewal.

Sketch or Figma or Adobe XD?

We aim to keep feature parity between the Sketch, Figma, and Adobe XD kits where possible.
We have a 50% off coupon for past customers who want to switch between two design tools.

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 a discount, please contact sales.

 

Package type

Live Preview
ReleasedJan 23, 2020
UpdatedApr 27, 2021
Version4.13.1
CategoryDesign
Questions?Contact us
Avatar
Created byMaterial-UI