🎨Guidelines - theme customization
After creating a new project, you will be redirected to the 🎨 Guidelines page. You will find 3 sections there:
GUIDELINES HELPERS - components used for creating a style guide. You are free to use them while adding your own components.
DESIGN HELPERS - elements thanks to which you can speed up your work on creating a theme. Currently, there is a full color palette used within Material Design.
DESIGN SYSTEM - contains the main components of the entire system design. We will describe it in more detail in the following sections.
Design system base
The design system section was created based on a theme that will be used by developers creating the application based on the Material UI library. It largely complies with Google's guidelines within Material Design documentation, but there are a few minor differences between them.
To see what the theme looks like from a developer perspective, you can go to this page and then click the "Expand all" switch. In addition to information about colors, typography, and shadows, you will learn from there about a much larger number of elements that make up a design system, such as animations (transitions section), the arrangement of elements on the Z-axis (zIndex section), or default breakpoints in the case of a responsive layout (breakpoints section).
Colors (Palette)
Within Material Design the color palette is focused on primary color, a secondary one, and wide range gray shades. In Material UI, the palette has been additionally enriched with colors associated with various states of elements such as success, information, error, warning.
How to modify colors?
All colors from the Palette section are to be defined with Local Styles → Color Styles on Figma. You should start modifying them at this place. In order to modify one of the colors:
Inside the right navigation bar, hover over the color you want to modify and click the icon that appears next to it.
Select a new value for a given color from the available palette, and copy that value.
Click anywhere on the application except the navigation bar to save the color.
The color change should be reflected by changing the background of the corresponding tile in the Palette section. Select the text under this tile and enter the value for the new color.
What are the related colors?
Related colors are the colors that in the final application are automatically generated based on other colors (therefore they do not appear in the theme). For example, primary / border color is created by increasing the transparency of primary / main to 50%. Currently, Figma does not allow us to automatically reflect this behavior. Therefore, each time you change one of the colors with the name ending in "main", you must remember to properly modify all related colors in the same column. Detailed information on how to get each of the related colors can be found in its description, visible in edit mode.
What are the "Other" colors?
The colors in the last section called "Other" are colors that do not appear in the default Material UI theme but are used as styles for some elements. Unlike the related colors described above, these colors are completely independent. If you modify one of these colors, the programmer will have to change it in each component in which it appears. To give you a full picture of how many components will concern the change of this color type, each color has a list of related components in the description available in edit mode.
Related sources
Shadows
Material Design determines 24 positions of elements on the Z-axis. Each of them is accompanied by a different shadow around the element.
The shadows available in UI Kit are as close as possible to those specified within the default Material UI theme, but it is worth highlighting that they are not identical. This is due to the fact that Figma does not allow us to specify the fourth parameter of each shadow called "spread".
How to modify shadows?
All shadows from the Shadows section are defined within Local Styles → Effect Styles in Figma. You should start modifying them at this place. To modify one of the shadows:
Inside the right navigation bar, hover over the shadow you want to modify and click the icon that will appear next to it.
Specify new values for the selected shadow.
Click anywhere outside the navigation bar to save the shadow.
The shadow change should be reflected on the card marked with the appropriate number within the Shadows section.
Related sources
Typography
Material Design’s typography has 13 fonts with different properties and purpose.
How to modify fonts?
All fonts from the Typography section are defined in Local Styles → Text Styles on Figma. You should start modifying them at this place. To modify one of the fonts:
Inside the right navigation bar, hover over the font you want to modify and click the icon that will appear next to it.
Specify new parameters for the selected font.
Click anywhere outside the navigation bar to save the font.
The font change should be reflected in the "Example text" column of the Typography section in the appropriate row. As a last step, modify all information on the given line to correctly describe the new properties of the changed font.
Outside local styles fonts
Some components (🗂 Components page) implement their own fonts that are not described in the Typography section. In their case, you can modify the font from the "Master Elements" or "Particles" level. You will learn more about this in the further part of the documentation.
Related sources
Last updated
Was this helpful?