Setting Your Brand Colors in the Component Library
This topic describes how you can change the out-of-the-box brand colors of the Component Library to your own brand colors using Figma.
Requirements
To follow the steps in this tutorial, you will need Figma and the Component Library Figma source file. You should also know what the platformOS Component Library is.
- Figma is a cloud-based design, collaboration, and prototyping tool. It’s free, but you can buy subscriptions for extended features. You can use this software from any browser, or you can download a desktop application for macOS or Windows operating systems.
Figma’s YouTube channel provides video tutorials on different topics for users of various skill levels. - The platformOS Component Library
A Figma design file view consists of three bigger sections:
- the Page and Layer panels on the left,
- the section in the middle with the Artboard itself,
- and the right panel, where you can navigate between the Design, Prototype, and Inspect modes.
Image: The view of the Component Library in the Figma desktop application
In this tutorial, you will use the Artboard in the middle and the Design panel on the right.
Video demonstration
Steps
Step 1: Find the color variants
The Component Library has a Color Variants palette. You can change the colors of these variants, but you can’t add new variants. Every component and element in the design system uses one (or more) color from the Color Variants palette. This means that you can’t set a unique color to an element or can’t change the assigned variant of an element (e.g. the Body text style uses the Normal text color variant), but you can change the assigned color. This way you can build a consistent design.
The original color palette complies with the W3C accessibility standards. Please, consider the accessibility of your colors and take care of adequate contrasts. You can check the contrast ratios with this online contrast checker tool.
Click on an empty space in the artboard. You can see all the color (and text) styles on the right panel.
Step 2: Pick a color variant
Hover on a color style: a Settings icon will appear on the right, next to the name of the color.
Step 3: Check the details of the chosen variant
Clicking on the icon opens a new window where you can get more details about the color variant. Here, you can find a short description of the given variant, too. At the bottom of this window, you can find the actual color assigned to the variant.
Step 4: Set your color
Click on the color. Now, you can pick or set a new color for the variant. (With the dropdown on the left, you can choose between different color specifications, e.g. RGB, HEX).
Step 5: Set all the remaining colors
Go through all of the color variants in the list and set your brand colors. The changes will be instantly visible on every component that uses the given color variant. You don’t have to change all the color variants, if you don’t want to, you can keep the existing colors, and set only the ones that are important for your brand.
Next steps
Congratulations! You have set your brand colors for the Design System. You can now move on to customize other elements or dive deeper:
Further customization
If you are experienced in using Figma and have a good understanding of Design Systems built with the Atomic Design method, further customization is also possible, such as adding custom graphics, images, or changing the look of the main components (atoms, molecules, etc.).
Please note that these modifications result in additional implementation work if you would like to keep the Figma Design System in line with its implemented version.
We suggest starting your deep-dive with the same steps as the customizations described in our tutorials: setting color variants, brand fonts, and logo. Because you can see these changes instantly, you can decide which other ones are essential for getting the look and feel of your brand.
After this first round of customization, set the look of the Atom components at the Atom screen: for example, change the border radius of the buttons and/or input fields. Because of the Atomic Design method, the changes of the Atom components will appear on the more complex components: on the Molecules and Organisms as well. All components use the auto layout feature of Figma (read more about this in the Features topic), so that Molecules and Organisms adapt well to the changes of the Atom components. It doesn’t mean you don’t have to review these more complex components, but it’s more like a sanity check: you don’t have to edit these components, only when you have specific requirements, for example, for the content.
Video demonstration: changes on an atom component (button) appear on a molecule
Download
Download the latest version of the platformOS DesignKit from our Figma Community profile: