This article is going to cover how you can import your existing brand assets and use them across other experiences you build. If you need information on setting up your brand assets for the first time, please review the following article: Fastr Frontend Experience Canvas – Setting up your Brand Assets

Importing your Brand Assets

After your Brand Assets have been published, you can follow these steps to import the library. 

1. From the Experience Canvas, navigate to the Assets tab, and select the "Libraries" button, as shown here: 
   
   
   
   
2. In the window that appears, the right half of the screen references the "Shared Libraries". In this section, you will want to click on the "Add" button next to your recently created Brand Assets Library. 
   
3. After selecting the "Add" button, you will notice the "Assets" tab update. It will now show your Brand Assets underneath your (local library). 
   
   

Using your Brand Assets

Once your Brand Assets are available in your local experience, there are a few different ways to use them in your experience.  The following sections will go over how to use the different Brand Asset types, and also how to adjust these elements.

Components
Graphics
Colors
Typographies

Components

To use a component, you can click and drag these elements directly onto your board. Once you've added a component, you will see a unique icon in the widget layer order. Additionally, right-clicking on a component will showcase some new functionality, as shown in the following screenshot. 

• Detach Instance: This feature allows you to detach a specific widget that is linked to the main component file. It’s useful when you need to customize a component instance independently without affecting the main component. If you decide to detach this instance of the component, you can use the "Create Component" option to make a brand new component in your local library. 
• Update Main Component: This feature can be used to modify the component from your original file. When this is selected, it will update the component that you are currently modifying, and it will also allow you to modify all experiences that use this component file. 
• Go to Main Component File:  Selecting the option "Go to Main Component File" will open the original experience where the component was created. 

Please note- If you select "Update 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

To use a graphic, you can click and drag these elements directly onto your board. This will create an image widget, and it will function just like a standard image widget. The Graphics icon can be useful when you have logos or icons that are often reused in multiple experiences. 

Colors

To apply a Brand Color, you will first need to select a specific widget. For example, if you need to adjust the color of a background rectangle, you will select that widget from the canvas. Once this widget has been selected, you can click on the color to easily apply it. 

As a shortcut, you can access the brand asset Colors by using this icon from the bottom left corner of the widget toolbar. It will open a toolbox below the experience canvas, and you can select the "three dots" to open your various libraries. From here, you can click on your imported asset library to access your colors. Using this shortcut menu makes it easy to select widgets and apply color schemes. 

Typographies

To apply Typography settings, you will first need to select a specific text widget. Once this widget has been selected, you can click on the typography from your list, and you will see the widget change to those predefined settings.

As a shortcut, you can access the brand asset Typographies by using this icon from the bottom left corner of the widget toolbar. It will open a toolbox below the experience canvas, and you can select the "three dots" to open your various libraries. From here, you can click on your imported asset library to access your typographies. 

Have any questions about this release? Email support@getfastr.com