Google’s new Material Design components can be wrapped in React and rendered to Sketch (without react-sketchapp)

Combine create-react-app, Google-approved Material Design library rmwc, html-sketchapp and html-sketchapp-cli to render Material Design components to Sketch.

In 2018, design is hurtling forward. Design and code are merging. There are two major bellwethers of this trend:

1. AirBnb’s innovative React-sketchapp, spearheaded by Jon Gold, landed in 2017. React-sketchapp renders React components to Sketch using Sketch’s API. Ushering in a paradigm in which the design “source of truth” resides in code. The code can be exported to Sketch as a designer’s starting point, and serve as a visual archive.
2. Google’s new Material Design tooling, introduced this month at I/O, which builds a different kind of bridge between designer and developer. The bridge has two pillars: Material Theme Editor, a Sketch plugin which provides Google spec’d Material Design elements, and allows customization of color, typeface and shape. And Gallery.io, a Zeplin-like tool for Material Design, which delivers the meta-data of metrics, color hexcodes, and type styles to the developer.

These tools get us closer to the long-planned designer-developer singularity, in which visual designs are smoothly and precisely assimilated into the codebase.

Part I: From React-sketchapp to Html-sketchapp

I was blown away by React-sketchapp when it came out. It was amazing to render to a Sketch window as if it was a browser window. React-sketchapp deserves a place in des-dev history, but I found it to be finicky with CSS and component types.

A Stack Overflow comment led me to discover Brainly’s html-sketchapp, which takes the principles of React-sketchapp and renders html elements to Sketch 😮😮😮

Brainly’s project page led me to Mark Dalgleish’s html-sketchapp-cli, which wraps the multi-step workflow of html-sketchapp into a tidy (and fast) terminal command 😱😱😱

Html-sketchapp and html-sketchapp-cli get us two steps closer to designer-developer fusion, standing on the shoulders of react-sketchapp.

Part II: Material Design + React

When Google announced their new official-spec’d Material Design components, I went looking for a React implementation of it.

The current dominant React implementation of Material Design is Mui’s Material-ui-next. It looks like Material. It interacts like Material. The documentation is excellent. But a deeper dive suggests why Google does not endorse it.

Material-ui-next goes beyond the implementations that Google offers. For example, Google offers two Snackbar component (corner alert) positions; Mui provides six. Google offers the Drawer component (slide-out menu) from the left and bottom sides. Mui allows the drawer to slide in from all four sides. It’s not a bad thing to provide these options. Material-ui-next is a well-executed and wildly popular project. But it’s easy to imagine Google designers perceiving it as unrestrained.

There’s another reason Google is selective about endorsing a third-party React implementation of MDC. Material Design components have a specific architecture: Foundations and Adapters. Any Google-approved wrapper would need to be true to this architecture.

Google has an official alpha implementation of React MD on Github, but there is very little documentation to assist the build process. After more searching, I discovered Google does endorse one single third-party implementation of Material Design in React. It is called rmwc by James M Friedman. The product is thoughtfully constructed and the documentation is solid.

Part III: Bringing it all together

I installed create-react-app.

Added rmwc.

Included Google’s Roboto and icon fonts in the index.html.

Built the Sketch plugin with html-sketchapp.

Installed html-sketchapp-cli globally, and ran the terminal command, which outputs a /dist file containing two “.asketch” (“Almost Sketch”) files, to be consumed by the Sketch Plugin.

I placed some Material Design components into App.js: 5 Buttons , 1 Card, and all 13 Typography components.

Added data-sketch-symbol props to the components.

And rendered to Sketch:

Above, you can view the top half of the page rendered to Sketch. You’ll notice the Sketch rendering is good, but not perfect.

• Font typography and size is accurate. Font color is not.
• The most noticeable error exists in the Card component: The bottom-right icons (implemented via the Icon font file) don’t render at all. Instead, Sketch renders the ‘use’ prop text, which designates the name of the icon to be rendered. In a separate render test, SVG code rendered perfectly to Sketch, accurate in form, color, and size.

I would characterize this top-half render as 90% accurate. A solid result, considering it came from a single html-sketchapp-cli terminal command 💪💪💪

Here is the bottom half of the render:

The <Typography/> Material Design (rmwc) components rendered to Sketch perfectly. I cross-checked the render against the Material Design official typescale sizing, and the typography is accurate to Google’s font-size spec.

I uploaded the whole project, including the html-sketchapp-cli dist files and the rendered Sketch file, into a Github repo. Please feel free to view and experiment with the project demo at this URL:

https://github.com/aarnadlr/material-design-react-to-sketch-demo.