What are variables?

Variables are custom controls that you create to customize the way you interface with a project. They can be connected to multiple inputs across your scene, so when you make changes to the variable, all connected values will be updated.

Variables are great for making macro changes across your project and exposing properties on deeply nested layers.

Creating variables

Variables can be created on the Variables Manager or on the Connections Panel. You can create an unlimited amount of variables.

To create variables on the Variables Manager:

1. Click the nucleus icon in the toolbar to open the Variables Manager.

2. Click + or Create new if no variables have been created yet.

3. Give your variable a name and select a variable type.

4. Click Create

To create variables on the Connections Panel:

1. Select a layer.

2. Hover your cursor over a property you’d like to connect to a variable and click the indicator that appears. The Connections Panel will open.

3. Click + "Add input…" and select + "Create variable…"

4. Give your variable a name and select a variable type.

5. Click Create. A new variable will be created, and the selected property will have an input connection set to the new variable.

Connecting variables to layer properties

Variables can be connected to any properties that have a corresponding type – i.e., color variables can only be connected to color properties.

To connect a variable to a layer property:

1. Select a layer.

2. Open the Connection Panel for the property you want to be connected to the variable.

3. Click the Input connection field.

4. Select the variable you’d like the property to be connected with.

Disconnecting variables

There are two ways to disconnect a variable from a specific property – using the Connections Panel or using the Variables Manager. When you disconnect a variable from a property, the property will inherit its current value.

Just like any other connection, variables can be disconnected using the Connections Panel:

1. Select the layer with the property you’d like to disconnect

2. Open the Connections Panel for the property you’d like to disconnect

3. Click the Input field to disconnect the property from the variable

Disconnecting variables in the Variables Manager:

1. Open the Variables Manager

2. Open the Variables

3. Settings for the variable you’d like to disconnect from the property

4. Find the property on the list of connections within the Variables Settings panel

5. Click the property input to disconnect the property

Variable types

There are multiple variable types; below is an outline of each and the types of properties that can be connected to this variable type. The examples listed below are not comprehensive.

• Color: Outputs a HEX color value. Use for any color field to affect, e.g., stroke color, fill color, or text color.

• Text: Outputs a set of text characters. Use with any text field to affect text content.

• Number: Outputs an integer, decimal, percentage, or degree value to affect, e.g., rotation, width, stroke width, font size.

• Number pair: Outputs a 2D vector value. Use for any combined number fields to affect, e.g., position, scale, or skew.

• Toggle: Outputs a true/false boolean value. Use on any checkbox field, e.g., “is spreading” on Box blur.

Deleting variables

You can delete variables using the Variables Manager:

1. Open the Variables Manager

2. Click the variable settings button for the variable you’d like to delete

3. Click the trash icon at the top of the variable settings panel

4. If a variable is connected to a property, you’ll receive a warning that requires confirmation to delete the variable. Click Delete to proceed or Cancel to keep the variable.