Setting Your Logo in the Component Library
This guide will help you set your logo for all screens in the Component Library.
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 Layer panel on the left, the Artboard in the middle, and the Design panel on the right.
Video demonstration
Steps
Step 1: Find the logo component
Go to the Atoms – Images and Avatars screen on the artboard. You can find the main component of the logo at the top of the page, under the Images category.
Step 2: Grab the logo component
Click on the logo multiple times until you reach the Logo component’s level in the layer hierarchy shown in the left sidebar. The Logo layer is marked with a purple diamond icon, which shows that it is a main component. Make sure this is the active layer.
Step 3: Add your logo to the component
Drag and drop your logo file into the component.
You can’t change the height of the original logo component but you can resize your logo within the component. It’s easier to use a logo with the correct size, so we recommend resizing your logo to 40 px tall before dropping it into the component. The SVG format is the best but you can use a PNG file, too.
Step 4: Position the logo
Position your logo: on top of the right panel, you can set the position to the left and the top of the component.
Step 5: Delete placeholder logo
Click on the eye icon on the layer panel to hide or delete the placeholder logo from the component.
Step 6: Resize logo
If your logo overflows on the component because of its ratios, we suggest decreasing its width, because a logo that’s too wide can hide elements in the header navigation.
- To resize your logo, select it and click on its bottom-right corner. Hold the Shift key and resize the logo to smaller. It’s best to have a width that is the same as the component itself: 214 px.
- Reposition the logo horizontally to the center of the component: on the top right corner, set the horizontal position to the center.
Next steps
Congratulations! You have set your logo for the Design System. You can now move on to customize other elements or dive deeper:
- Setting Your Brand Colors in the Component Library
- Setting Your Brand Fonts in the Component Library
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: