Brand Studio streamlines templates by letting Template Designers preset options that Template Users can use to customize a template within your branding guidelines. This is achieved be setting Template Variables, which can be modified using Template Actions.

Define a Template Variable

In the Properties Panel, select the tab, then click on "Variables". Find the "Variable List" and click the button to generate a new variable. Hover over the variable to reveal the additional options, and click the button to edit it.

Click to zoom

The tab will automatically be selected. Under "General", select the type of variable you want to use, and whether the variable is "required". You may also already define a "Default State", which is the value that will be assigned to the variable when the template is opened.

Depending on the type you choose, further options may become available, allowing you to further define the variable.

Click to zoom

To change the variable's name, select the tab. You can also provide a placeholder, and an explanation of the variable's purpose for the Template User.

Click to zoom

Create a Template Action

Once you have created a Template Variable, you can use Template Actions to modify them.

In the Properties Panel, select the tab, then click on "Actions". Click the button to start creating a new action.

Click to zoom

Add a trigger

Each must have at least one trigger, something that that will cause the action to happen. Click the "Add Trigger" button and select the type of trigger you want. After selecting your triggers, click the "Action" tab.

Click to zoom

Add an action

Actions consist of custom JavaScript code, that is executed whenever a trigger event happens.

The editor uses the ES2020 Standard, with additional modifications to expose the Studio object –including documents, frames, and more – and added functions specific to Brand Studio.

To use the Studio object, simply type "studio." and the JavaScript editor will suggest objects that fit within the scope of what you are doing. Each object has properties and functions that are accessed by adding another "." and selecting from the suggestions. If you want more information on a specific object, property, or function, simply right-click the line in the editor and select from one of the "Peek" options.

Click to zoom

Genie

If you are not comfortable writing JavaScript, you can still easily use actions by activating Genie, the Brand Studio AI companion.

Click the button and describe to Genie what kind of action you want to happen, and Genie will create the necessary code for you, and also provide comments to help you understand it.

While Genie is powerful, it is limited within the framework of the Brand Studio, and you should always verify the provided code before using it.

Once you are done writing your code, click "Create" to add the action to the Template.

Click to zoom