In Fastr Frontend you can create an experience that is full of your Brand Assets, which will be reused throughout new experiences. These Brand Assets will contain components, graphics, typographies, and color schemes that you might frequently use. The following article will go over the steps to set up your brand assets, and will also explain how to Publish your Brand Assets library. There are four different categories of brand assets:
Components
Graphics
Colors
Typographies
Creating your Brand Assets
Components
A component is an object or group of objects that can be reused multiple times across files. You could make a component from a single widget, turn a specific single CTA into a component, or create a component from an entire landing page with hundreds of widgets. By using a component, it can help you maintain consistency across a group of designs. It will also allow you to update a single component, and publish those updates to any files where you reuse that element.
To set-up a component, simply right-click on a widget (or group of widgets) in the Experience Canvas and select the "Create Component" option, as shown here:
You can still modify these components in the original file, in case you want to make changes across all of your experiences. This can be seen in the following screenshot, where I have changed the color of the text and selected the "Update Main Component" button:
Please note- If you update the main component, you will see this pop-up message in any experiences that are linked to that same component. This allows you to decide if you want to import the latest version of your component, or continue without updating:
Graphics
The graphics section can be used to add images to your Brand Assets library that might be frequently reused. This allows you to choose a specific selection of images, as opposed to the Image Library, which will show all images in your account. To add graphics to your Brand Assets, you can select the "+" icon next to the Graphics section, which can be seen in the following screenshot. Once this icon is selected, you can select an image from your local library to import into your Brand Assets library.
Colors
The colors option allows you to save color schemes that are part of your brand. To add a color, you can just click on the "+" icon to select the exact colors that should be used as brand assets. From the menu that appears, you can use the various options to pick a specific color. Alternatively, you can use the color picker option to pick from any widget in the experience canvas.
Once you have selected a Color, you can double click on the name to make changes. This can be helpful for adding labels to your colors for referencing later:
Typography
The typography section allows you to set-up specific font settings that match your brand. To set-up a typography, just select the "+" icon, and then define the exact font styling. As shown in the following screenshot, you can select the font, font size, font weight, line height, letter spacing, and header values:
Similar to the Colors section, you can also rename these fonts. Adding specific names to your fonts will make it easier to reference which font is required later on:
Publishing your Brand Assets
After setting up your brand assets, the next step is to publish them so that other experiences can reference these assets. To do this, navigate to the Assets tab and select the "Libraries" button, as shown here:
Next, you can select the "Publish" button when looking at the "Libraries in this experience" window. Once this is selected, the Library will be available to import in all of your other experiences. Additionally, you will be able to find this library under the "Brand Assets" tab from your dashboard.
Now that you have published your asset library, please refer to the following article on importing and using these assets in other experiences: Fastr Frontend Experience Canvas – Importing and using your Brand Assets
Have any questions about this specific article? Email support@getfastr.com
Comments
0 comments
Please sign in to leave a comment.