Setting Your Brand Fonts in the Component Library
This guide will help you set your brand font types in the Component Library to use instead of the out-of-the-box fonts.
The design system has pre-defined text styles, but you can assign your brand font type to these styles. You can’t add new styles. We suggest not changing the font sizes and line heights of the styles, because they are set with a consistent hierarchy and their sizes fit common design standards.
Please, strive not to use more than two different font styles, because using too many fonts could make the design look unprofessional.
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 text styles
Click on an empty space in the artboard. All text styles are displayed on the right panel.
Step 2: Pick a text style
Hover on a text style: a Settings icon will appear on the right, next to the name of the text style.
Step 3: Replace the font
By clicking on the icon, a new panel opens with the details of the text style. Click on the name of the assigned font to select another font from the dropdown menu (it contains all Google fonts and all your local fonts). If you choose a font that is not part of the Google fonts library, you have to provide the source file of the font for the developers.
Step 4: Set the font weight
Below that, you can change the weight of the font, but as the text styles list shows, the design system contains separate styles for the different weight variants (e.g. Heading 2 and Heading 2 Bold).
Step 5: Set the case (optional)
You can change the case of the text styles (e.g. if you’d like to use upper case letters on the buttons) by clicking on the three dots icon at the bottom right corner of the panel. Here, you can change the case of the text style. (Heading 1 and Sidenote text styles already have an uppercase variant in the list.)
Step 6: Set all the remaining text styles
Go through the list of the text styles and set your brand font(s).
Please, don’t change the font of the Code text style, as we chose a well-functioning code font for that.
Next steps
Congratulations! You have set your brand fonts 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, like 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: