Material Design + Figma Styles = 🔥
By: Thomas Lowry
Tags: UI, Product, Design, UX, Technology

Material Type—I created text styles for the all of the styles specified in the Material Design spec. By default these are set to Roboto, but can be easily redefined to use your brand’s typeface. Changing a style to a different font will instantly propagate the changes across the whole system. Bear in mind, you may need to make some adjustments to type size and spacing in order to fine tune the sizing across the system. As the kit evolves, I plan to include some predefined size recommendations that work for some of the most popular Google fonts.

Some of the styles defined in the kit.

Material Elevation—I created a library of preset drop shadow styles for all elevations. Changing the elevation of an element is as easy as choosing the appropriate elevation—this greatly simplifies the process of applying Material shadows which are sometimes complex combinations of up to three different drop shadows.

Material Grid—Material is based on a 4dp baseline grid so I created a style for that too. You can apply this to any frame or component, and of course, you can add your own grids for desktop, mobile and tablet and apply them as needed.

Combining Styles with Components

Material Design encourages designers to control the shapes of UI components to better reflect the personality of the brand. They give users the option to customize surface corners, ranging from sharp rectangular corners, to 45 degree cuts, to varying levels of roundedness.

Using nested components to make globalized changes to card and button shapes.

To achieve this, I created some basic shape components for buttons, floating action buttons, and cards. This gives users the ability to adjust the size of the cuts or the degree of corner radius for any chosen shape. Then I nested those components within another master component which would become the base for corresponding components in the system. If you decided you wanted to have cut-off corners, it is as simple as toggling the visibility of the correct nested component.

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). Because you can access the nested layers within every component instance, if there are specific places where you want change the style, you can make that change as an override in any instance.

Material Design also give you the option to change between 5 different icon styles. To keep the weight of the kit down, we created 5 separate sticker sheet documents for each icon style, complete with components for each icon. You can copy the desired icons from those files, or better yet, publish them as a shared library to your team and pull them into your projects.

Interested in trying Figma Styles?

If you would like to try the Figma Styles beta, sign up here (EDIT: Figma Styles is now available for anyone to use. Simply sign up for Figma). Beta users will get access to the Material UI kit and accompanying icon libraries.

If you still need to support the previous iteration of Material Design, we’ve got you covered with another fully flushed out UI kit that is built to leverage the power of styles. Beta users will also have access to this kit.

Haven’t tried Figma before? Check it out.