Create and customize your Google Material Design theme exclusively in Sketch

Last week, Google kicked off I/O 2018 at the Shoreline Amphitheatre in Mountain View, California and, alongside a series of exciting announcements they unveiled their vision for the future of Material Design.

With the launch of Material Design back in 2014, Google reinvented their approach to software design, and it led to designers reimagining how users should interact with their apps. The system worked and was adopted en masse, but, while usability improved, Material Design was restrictive and many Material apps looked similar and failed to reflect the brand or product they were designed for. This begged the question — how do you build a design system that offers control and consistency but is flexible enough to be used by a variety of different brands and designers with very different personalities?

Google is looking to answer that question with the latest iteration of their design system. The next stage of Material Design expands on their existing foundation by providing new tools and guidelines to empower designers who want to adapt Material Design to suit their own brand, design language and style — allowing more flexibility while still maintaining the same excellent usability standards that Material Design is famous for.

The most exciting part of this, for us at Sketch, is that designing for Material is now easier than ever with the new Material Theme Editor, a Sketch-exclusive plugin that lets you create a Design System for your Material app in seconds, and theme it to match your existing brand. The Theme Editor is an incredibly powerful tool that allows you to create your own branded Symbol Library in Sketch, with total control over global styles like color, shape, and typography.

“We like to talk about it as infinite possibilities, with guardrails.”

You can check out Rachel Been’s Keynote on the Material Theme Editor here or read on to find out more about the endless possibilities with the Material Plugin in Sketch.

Control your colors

The Material Theme Editor for Sketch makes it incredibly easy to apply color themes across your entire design system, letting you auto-apply colors to components by choosing primary, secondary, background, text and icon hues.

You can choose colors from the Material color palette, generate a tonal palette of 10 color values from just one color and even check color contrast to make sure your designs meet accessibility standards.

Sync your shapes

Select your shape and corner radius, choose between curved or cut corners and experiment with asymmetric styles to define the basic shape of your components. Then watch these styles propagate to all the Symbols in your Library, instantly.

Innovate with iconography

The Material Plugin includes one-click access to all the icon collections in Material design, including the new, and gorgeous, two-tone icon theme. Express your brand, like never before, with stylized system icons that come in a bunch of different formats, sizes, and densities.

Transform your typography

You can add up to three typefaces to your theme and quickly access popular Google fonts to define your theme’s typography. Once you’ve chosen your fonts Material Theme Editor lets you automatically resize and optimize your fonts for readability, based on Material typography guidelines.

Get started with Material Theme Editor for Sketch

Excited? If you want to create your own Material Design theme you can download the Material Plugin here. Google have produced extensive documentation and a really useful video to help you get started with the Material Theme Editor in Sketch.

The Material Plugin requires Sketch 49 or later and macOS High Sierra 10.13 to run, and also provides access to the Material component library and the ability to upload artboards directly to Gallery — a tool for sharing, organizing and collaborating on your Material Designs.

We worked closely with Google on this plugin, and we’re really excited about it. The Material Design Editor really showcases what’s possible with Sketch’s plugin system. Under the hood, this is an incredibly complex plugin, with lots of moving parts, but for Sketch users it’s beautifully simple and transforms the daunting task of building a design system into an almost trivial one.

If you’re a developer and you want to build plugins like this, please reach out to us. We have a vibrant developer community and an expansive plugin ecosystem, and we’d love for you to be a part of it. Get in touch at [email protected] or head over to www.sketchplugins.com to find out more.