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.
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.
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.
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 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".
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:
I've produced a video tutorial for those that want a more in-depth explanation of the above. I hope it's helpful!
Search over 300 blog posts from our team
Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!