[blog] Introducing Material-UI for Sketch

docs/pages/blog/2020-introducing-sketch.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import markdown from './2020-introducing-sketch.md';
+
+export default function Page() {
+ return <TopLayoutBlog markdown={markdown} />;
+}

docs/pages/blog/2020-introducing-sketch.md

@@ -0,0 +1,67 @@
+---
+description: Today, we’re excited to announce the introduction of official Sketch symbols for Material-UI.
+---
+
+# Introducing Material-UI for Sketch
+
+Olivier Tassinari. March 30, 2020.
+
+Today, we’re excited to introduce the official Sketch symbols 💎 for Material-UI.
+
+[![preview](/static/blog/2020-introducing-sketch/product-preview.png)](https://material-ui.com/store/items/sketch-react)
+
+<p class="blog-description">Available on our <a href="https://material-ui.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 [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.
+
+![preview](/static/blog/2020-introducing-sketch/design-tools.png)
+
+<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](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.

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,
  },
  },
 });