Often when we think of design systems, we think of a tightly controlled collection of components, patterns and guidelines in order to ensure consistency across a product. In the context of a single product or brand, this makes a lot of sense, but what about a design system for a platform that will be adopted by many different brands/products?
Google’s Material system has been faced with this challenge since its inception. Its adoption has ensured far more consistent experiences across both Google and non-Google native Android applications. That said, although those experiences excel in usability, they’re less successful at becoming memorable extensions of the brand. There’s drawbacks when everyone leverages the same set of components.
Enter the next evolution of Material—a system that builds on everything that was great about its first iteration, but adds the ability for brands to theme their system in ways that will allow Material apps to feel less like stock native UI experiences, and more like impactful on-brand experiences.
With an infinite number of possibilities and such a large library of components, it poses an interesting challenge for designers to easily theme and customize an entire UI kit. I decided to take on the challenge as a side project for collaborative design tool Figma, to see how we could work together to make a Material kit that could leverage Figma features…
Figma recently announced a modular take on Styles, allowing you to quickly define global text, fill, stroke, effect and grid styles. Making a change to a style instantly makes a globalized change across your entire document. Additionally, styles can also be pushed to your shared team library, to be used across all of your team’s projects in the same way you would share a component.
I was fortunate enough to get early access to Figma Styles, and got excited about the possibilities of using them for Material Design. So I created a Material UI kit using Styles to make building Material apps much easier. While this isn’t an official kit or partnership, I think it showcases how well these things work together.
Material Colors — I used a fill style for all of the primary and secondary app colors, all levels of emphasis for typography, and a number of swatches for surface colors. Modifying the theme to match your brand’s colors is as easy as picking new colors. I also included a page in the document to access the stock Material palette. Alternatively you can also use Google’s new color tool as a starting point.