

That change is then reflected across the entire system (note: in some cases this will take a few seconds for the change to propagate through hundreds of components). If you decided you wanted to have cut-off corners, it is as simple as toggling the visibility of the correct nested component. Then I nested those components within another master component which would become the base for corresponding components in the system. This gives users the ability to adjust the size of the cuts or the degree of corner radius for any chosen shape. To achieve this, I created some basic shape components for buttons, floating action buttons, and cards. Using nested components to make globalized changes to card and button shapes. 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. Making a change to a style instantly makes a globalized change across your entire document. 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… Enter Figma Stylesįigma recently announced a modular take on Styles, allowing you to quickly define global text, fill, stroke, effect and grid styles. 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. Source: Material.ioĮnter 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.


Theming possibilities in Material Design.
