Apply variables

Motiff supports applying variables to specific layer properties, which helps to keep your design consistent. You can use local variables in the files or use variables from team libraries that you have permission to reference.

Apply color variables

Color variables can be applied to fills, strokes, shadows, and gradient stops. They can also be applied to color properties in color styles or effect styles.

Both color variables and color styles can be selected from the Library panel in the color picker.

1. 1.Click in the Library panel and select a library as needed.
2. 2.Click to switch views. Motiff supports list view and grid view.
3. 3.Square color wells displays color variables.
4. 4.Circular color wells displays color styles.

Fills or strokes

You can apply color variables to fills or strokes:

1. 1.Select the layer where you want to use a variable.
2. 2.In the right sidebar, click in the Fill or Stroke section to open the color picker.
3. 3.View local variables and variables from team libraries.
4. 4.Select the variable to apply it to the layer as needed.

Shadow effects

Color variables can be applied to the color properties of shadow effects:

1. 1.Select a layer with shadow effects or add shadow effects to a layer if you haven’t done so.
2. 2.Click located on the left side of the shadow effect.
3. 3.Click on the color well in front of the color value.
4. 4.Choose the variable from Libraries as needed.

Gradient stops

Color variables can also be applied to gradient stops:

1. 1.Select a layer with a gradient or add a gradient to a layer if you haven’t done so.
2. 2.Click the color well in front of Fill or Stroke section to open the color picker.
3. 3.In the Stop modal, click the color well in front of the color value.
4. 4.Choose the variable from Libraries as needed.

Apply color variables in styles

Motiff supports applying color variables in the following styles:

• Solid fills in color styles.
• Gradient fills in color styles.
• Color properties in effect properties.

You can use color variables in existing styles or new styles by following these steps:

1. 1.

   Click a blank area on the canvas.

2. 2.

   In the Local styles section of the Design panel, hover over a style and click on the right.

3. 3.

   In the panel for editing styles, click the property under the Properties section to edit it.

   • Solid fills: Click on the color well in front of the property and select the variable you need to use in the library.
   • Gradient stops: Click the color well in front of the property. In the Stops modal, click the color well in front of the color value and select the variable from the library as needed.
   • Shadow effects: Click in front of the properties, then click on the color well in front of the color value, and select the variable you want to use in the library.

Detach variables

When you detach a variable from a property, the property will no longer update with changes to the variable. You can freely modify these properties as needed.

1. 1.Hover over the property value where the variable is applied.
2. 2.Click to detach the variable.
3. 3.The property value will revert to a specific value.

Switch modes

Motiff sets the first mode in a collection as the default mode. When collaborators use variables, the variable value of the default mode is applied.

Switch modes on the page

If the local variables in the file or variables from the referenced team library contain multiple modes, you can switch modes on the page:

1. 1.Click a blank area on the canvas.
2. 2.In the Page section of the Design panel, click 。
3. 3.Hover over the variable collection name and select the mode you want to switch to.

Switch modes on layers

When the variables used by a layer or its child layers contain multiple modes, a [icon] will appear in the Layer section. At this point, you can switch the mode on the layer in the following steps:

1. 1.Select a layer using variables.
2. 2.Click in the Layer section of the right sidebar.
3. 3.Hover over the variable collection name and select the mode you want to switch to.

Auto Mode

For layers that are using variables, the default mode is set to Auto. In this case, the mode corresponding to Auto will inherit the mode set on its parent layer or page.

Mode conflicts

Mode conflicts occur when layers in the file use different versions of the same variable and the modes are added or removed between versions. Motiff will display next to the conflicting mode in the mode switcher.

Resolve mode conflicts

1. 1.View and accept updates to the library in the file with mode conflicts.
2. 2.If the prompt indicating library updates is not shown, you can open the libraries where the variable is located and publish the updates.