005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
77 lines
4.6 KiB
Markdown
77 lines
4.6 KiB
Markdown
---
|
||
title: Introducing Material UI for Sketch
|
||
description: Today, we're excited to announce the introduction of official Sketch symbols for Material UI.
|
||
date: 2020-03-30T00:00:00.000Z
|
||
authors: ['oliviertassinari']
|
||
tags: ['Material UI', 'Product']
|
||
manualCard: true
|
||
---
|
||
|
||
Today, we're excited to introduce the Sketch symbols 💎 for Material UI.
|
||
|
||
[](https://mui.com/store/items/sketch-react/?utm_source=blog&utm_medium=blog&utm_campaign=introducing-sketch)
|
||
|
||
<p class="blog-description">Available on our <a href="https://mui.com/store/items/sketch-react/">store</a></p>
|
||
|
||
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.
|
||
|
||
We dream of a world where designers and developers can share the same tools. We wish to streamline the creation process of great UIs.
|
||
This new product brings you one step closer to this long term goal. It enables designers to provide developers close to production "handoffs". It aims to **maximize efficiency and consistency**.
|
||
|
||
## Why
|
||
|
||
### Frequent requests
|
||
|
||
Over the last few months, we have seen a growing number of designers asking for these Sketch symbols.
|
||
For instance, there is a [Stack Overflow question](https://stackoverflow.com/questions/38834629/material-ui-sketch-files) with over 4,000 views. It has been a common request on X: [one](https://x.com/TimoMajerski/status/1144503789619224578), [two](https://x.com/jonminori/status/1141121330156310528), [three](https://x.com/ProfessorXavior/status/1196522875706056705), [etc](https://x.com/JeffreyKaine/status/1133435042259120132).
|
||
|
||
### No great alternatives
|
||
|
||
For a long time, we have ignored the problem. We were recommending users to try alternatives out. However, we realized that it wasn't a great answer. There were no good solutions out there:
|
||
|
||
- **Sketch** has [some symbols](https://i.stack.imgur.com/vEEAA.png) for Material Design. Unfortunately, they cover <30% of the components available in Material UI, use an outdated version of the specification, and focus on mobile (leaving desktop behind).
|
||
- **Material Design** had a [Sketch plugin](https://m2.material.io/resources/theme-editor/).
|
||
Unfortunately, it was recently retired, was supporting fewer components than Material UI, and didn't use the same wording/structure as Material UI that made it harder to move from design to implementation.
|
||
- Anything else is paid.
|
||
|
||
### Gain efficiency
|
||
|
||
No matter what your role, you'll be more efficient with these assets:
|
||
|
||
**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 in autonomy, design 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.
|
||
|
||
<iframe style="width: 100%; max-width: 648px;" height="364" src="https://www.youtube.com/embed/DTU6r_VE2C4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||
|
||
Sketch Cloud preview: https://mui.com/store/previews/sketch-react/.
|
||
|
||
## More tools
|
||
|
||
According to a [recent user survey](https://medium.com/google-design/state-of-design-systems-2019-ff5f26ada71) ran by the Material Design Team, Sketch is the most popular tool used by teams to manage design systems. However, it's not the only tool.
|
||
|
||
|
||
|
||
<p class="blog-description">Popular tools used to manage Design Systems (n=1762)</p>
|
||
|
||
We are working on the support of more popular tools.
|
||
We have recently released the support of Framer X for Material UI.
|
||
We plan to release the support of **Figma** in the coming weeks. You can subscribe to the [newsletter of the store](https://mui.com/store/#subscribe) to be notified when available.
|
||
|
||
## Features
|
||
|
||
You can learn more about the features available on the [Sketch page details](https://mui.com/store/items/sketch-react/?utm_source=blog&utm_medium=blog&utm_campaign=introducing-sketch) of the symbols.
|