Material Theme Editor Colours header Image
Written by Josh O'Riordan
Feb 11, 2019

Adding Colours to a Sketch Material Theme Library

The Material Theme Editor for Sketch is game-changing, but sometimes two colours aren't enough.

View video

The Material Theme Editor Sketch Plugin?

In May 2018, Google revealed its vision for the future of Material Design at Google IO.

Google is setting out to maintain the high usability standards set out by Material, whilst also empowering designers to adapt it for very different brands and personalities.

Excitingly for designers, they released a Sketch plugin that makes creating huge symbol libraries fast and effective. You can also maintain control over global parameters such as colours, typography and icon styles.

Get started

If you aren't using the plugin already, then I'd recommend heading over to this blog post by Sketch. Once you're all caught up you can download the plugin from here.

Do we need extra colours?

The plugin has a pretty nifty interface for selecting primary and secondary colours for your layout (there's also a surface colour). And although these are great, we've run into times when you need to either tweak those colours or add new ones.

  • Some clients have had more than two major colours that they want to use in their products.
  • Other clients have already defined the colours they use for errors and validation.
  • One product used different primary colours depending on the user type.

In our layout files, we could disconnect symbols and edit colours one at a time. But the point of the plugin is to ensure consistency across our designs, and so we need to explore a way of doing that on a global level.

Adding an extra colour

The plugin has a vast symbol page and navigating it is hard. Look for the colour symbols labelled: "✱ /Color"

The system I like to use is to duplicate one of the symbols and create a color subfolder called: "✱ / Color / Brand". This then contains all my brand colours but also allows them to sit in the same symbol folder.

Using those extra colours

Using those colours is quite straightforward. Wherever you have a colour in a symbol, change it to "✱ / Color / Surface / Primary or Secondary". That way you can then access the other colours available. Use the second drop-down that appears and navigate through the symbol tree to find "✱ / Color / Brand".

A couple of things to watch out for

Although 99% of components colours get defined by symbols, sometimes you still need to dive in and change a symbol manually. There isn't any particular rule for which symbols need editing directly. But below are a couple we commonly use:

Error colours - if you want to change the error colour you can do so on the original error symbol called "✱ / Color / Icons / Error".

Caption Colours - the caption text symbols are used for validation on text fields. To make sure they are the correct colour, find their symbols and edit them, i.e:

  • "✱ / Text / Caption / Error / Left"
  • "✱ / Text / Caption / Error / Center"

Video

I've produced a video tutorial for those that want a more in-depth explanation of the above. I hope it's helpful!

Previous Post

Creating Vector Drawables for Android

Top