Available on our store
+ +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 [StackOverflow question](https://stackoverflow.com/questions/38834629/material-ui-sketch-files) with over 4,000 views. It has been a common request on Twitter: [one](https://twitter.com/TimoMajerski/status/1144503789619224578), [two](https://twitter.com/jonminori/status/1141121330156310528), [three](https://twitter.com/ProfessorXavior/status/1196522875706056705), [etc](https://twitter.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://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. + +## 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. + + + +Popular tools used to manage Design Systems (n=1762)
+ +We are working on the support of more popular tools. +We have recently released the support of [Framer X](https://packages.framer.com/package/material-ui/material-ui) 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://material-ui.com/store/#subscribe) to be notified when available. + +## Features + +You can learn more about the features available on the [Sketch page details](https://material-ui.com/store/items/sketch-react/) of the symbols. diff --git a/docs/public/static/blog/2020-introducing-sketch/design-tools.png b/docs/public/static/blog/2020-introducing-sketch/design-tools.png new file mode 100644 index 00000000000000..ac7d31cfca5f2a Binary files /dev/null and b/docs/public/static/blog/2020-introducing-sketch/design-tools.png differ diff --git a/docs/public/static/blog/2020-introducing-sketch/product-preview.png b/docs/public/static/blog/2020-introducing-sketch/product-preview.png new file mode 100644 index 00000000000000..79addec4da790d Binary files /dev/null and b/docs/public/static/blog/2020-introducing-sketch/product-preview.png differ diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 92532e3fdcc32b..a126f00ca9245b 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -34,6 +34,7 @@ const styles = (theme) => ({ '& .blog-description': { fontSize: theme.typography.pxToRem(14), textAlign: 'center', + color: theme.palette.text.secondary, }, }, });