Help

Create and customize your Material theme - the Material Theme Editor helps you make your own branded symbol library and apply global style changes to color, shape, and typography.


Using Theme Editor

Getting started with Material Theme Editor

Create your own Material theme. Learn how to use the Material Theme Editor to customize components and create your own branded symbol library.

Read More

Create your own Material theme. Learn how to use the Material Theme Editor to customize components and create your own branded symbol library.

Using Material icon themes

5 sets of themed Material icons can be downloaded directly from the Theme Editor or by visiting Material icons in the Tools section. Sets of...

Read More

5 sets of themed Material icons can be downloaded directly from the Theme Editor or by visiting Material icons in the Tools section. Sets of Material icons can be linked as Sketch library files, using the Libraries section in Sketch preferences. This allows you to insert any icon using the Insert menu, and to swap existing icons using the overrides panel.

To use the Material icon sets in Theme Editor component symbols:

  • Download an icon set from the icons tab of the editor panel.
  • With the icon file open, select File > Add as library.
  • This will add the icon set to your Sketch libraries. You can then pull added icons into any component symbol through the Sketch override panel.

Using tonal palettes

When editing a theme and choosing colors in the Color panel, the Material Theme Editor will generate a 50-900 tonal palette based on a color...

Read More

When editing a theme and choosing colors in the Color panel, the Material Theme Editor will generate a 50-900 tonal palette based on a color you’ve selected.

By default, symbols in the library will automatically change to your theme’s main primary color, secondary color, and surface colors. Override an automatically applied color by using Sketch Overrides:

  1. Select the component.
  2. In the Sketch override panel select ↳ Tonal Palette, and pick any swatch from the palette.

Please note that automatically selected colors are chosen to improve accessibility, and changing a symbol’s surface color may make your product less legible to users. To see if the text in your Symbol Library should be black or white, check the “Color Scheme” artboard in the “Material Theme” page.

Editing the shape of symbols

When editing a theme using the Shape panel, you’ll see that only some components in the symbol library are affected. The Material Theme Editor automatically...

Read More

When editing a theme using the Shape panel, you’ll see that only some components in the symbol library are affected. The Material Theme Editor automatically applies shape only as described in the shape guidelines, which also matches the capabilities in the Material Components code libraries.


Using Sketch

The Material Theme Editor makes use of many of Sketch’s base features, allowing users to keep working using the methods, tools, and plugins they’re used to. This section highlights a few of the features that the Theme Editor relies on.

To learn more about using Sketch, we recommend visiting the Sketch Website and its Support section.

Updating, disabling, or removing Theme Editor

Material Theme Editor is part of the Material Plugin for Sketch. To update, disable, or remove plugins in Sketch, open the “Plugins” section in Sketch...

Read More

Material Theme Editor is part of the Material Plugin for Sketch.

To update, disable, or remove plugins in Sketch, open the “Plugins” section in Sketch preferences (also available from the Plugins → Manage Plugins dropdown).

Using Libraries

Themes created using the Material Theme Editor are saved and linked to Sketch files as Libraries, which allow users to share symbols across documents and...

Read More

Themes created using the Material Theme Editor are saved and linked to Sketch files as Libraries, which allow users to share symbols across documents and keep them in sync. Learn more about Libraries on the Sketch website.

Every theme created with the Material Theme Editor creates a new Library and is linked to Sketch. Manage linked Libraries from the “Libraries” section in Sketch preferences.

Syncing updates from Libraries

When changes are made to symbols in a Library, Sketch will automatically sync those changes across all documents containing that Material Symbol. Sync Material symbols...

Read More

When changes are made to symbols in a Library, Sketch will automatically sync those changes across all documents containing that Material Symbol. Sync Material symbols to your design files by selecting “Library updates Available” in the top right corner of the document.

Working in a team

Sketch Libraries can be saved in the cloud (e.g. a shared Google Drive folder), allowing anyone with access to link the Library to their Sketch....

Read More

Sketch Libraries can be saved in the cloud (e.g. a shared Google Drive folder), allowing anyone with access to link the Library to their Sketch.

When a shared Library is edited, everyone that linked the Library to Sketch will receive a notification allowing them to sync the updates with their design files. This allows teams to make updates to a Material Theme and have the changes automatically updated in everyone’s files.

Adding symbols to artboards

Symbols from your Material Theme can be easily added to your design file by selecting “Insert” in the Sketch toolbar. Each Material Theme that is...

Read More

Symbols from your Material Theme can be easily added to your design file by selecting “Insert” in the Sketch toolbar. Each Material Theme that is linked to Sketch will show up as a separate submenu in “Insert”.

Click the Insert button in the Sketch toolbar to add symbols from your theme to artboards

States and styles

To represent the various states and styles supported by Material Design components, many of the symbols in Libraries created by the Material Theme Editor have...

Read More

To represent the various states and styles supported by Material Design components, many of the symbols in Libraries created by the Material Theme Editor have extensive support for overrides. To swap between states or variants of a symbol added to your design, use the Sketch overrides panel to select symbol options.


Known issues

Startup error after installation

In Sketch 49, a freshly installed plugin will sometimes not launch the first time it is used. To solve this issue, simply close and restart...

Read More

In Sketch 49, a freshly installed plugin will sometimes not launch the first time it is used. To solve this issue, simply close and restart Sketch.