Organize and manage variables

Variables can store the values of reusable design property. It allows more flexibility in maintaining design consistency and facilitates the implementation of multi-theme designs.

Motiff allows you to organize and manage variables through the Variable popup. You can follow these steps to open it:

1. 1.Click on a blank area of the canvas.
2. 2.In the right sidebar, click under the Local variables section.

Organize variables

Create variables

1. 1.

   In any collection, click + Color variable button.

2. 2.

   Name the variable in the first column.

3. 3.

   Set the variable value in the second column:

   a. Click on the variable value and enter directly. b. Click on the color well to customize the color using the color picker.

Add collections

1. 1.Open the Variable panel and click in the top-left corner.。
2. 2.Select Create collection. You can organize collections in the following ways:

• Rename: Click next to the collection name and select Rename collection.
• Delete: Click next to the collection name and select Delete collection.

Group variables

You can group the variables as follows to organize them more effectively:

1. 1.Select one or more variables in a collection.
   • Select a range of variables: In the layer list, select the first variable, hold down the modifier key ⇧ Shift , and then click the last layer.
   • Select multiple variables: In the layer list, select the first variable, hold down the modifier key ⌘ Command / Ctrl , and then click the variables you want to select.
2. 2.Right-click and select Add new group.

You can organize groups in the following ways:

• Rename: Double-click the group name in the left column to edit it.
• Reorder: Drag one or more groups to change their order or move them to another group.
• Duplicate: Right-click a group name in the left column and select Duplicate group.
• Ungroup: Right-click a group name in the left column and select Ungroup.
• Delete group: Right-click a group name in the left column and select Delete group.

Create alias

Variable values can not only be set as color values but also reference an existing variable.

When referencing another variable, you only need to modify the referenced variable, and all associated variables will be updated at the same time.

You can follow these steps to reference another variable:

1. 1.

   Right-click on the variable value and select Create alias.

2. 2.

   Choose the variable to reference from the library. You can use the Search feature to quickly find the corresponding variable.

If you no longer want to reference this variable, hover over the variable value and click to detach the alias.

Create modes

A mode refers to a group of variable values under one theme in a collection.

Motiff allows you to define multiple values for the same variable to adapt to different design context, such as light and dark color themes.

1. 1.In the Variable popup, select a collection to which you want to add the mode.
2. 2.Click on the right side of the title to create a mode.

Default mode

Motiff sets the first mode on the left side of a collection as the Default mode. When collaborators use variables, the variable values in this mode are applied by default.

In the page’s mode switcher, the default mode of the collection is displayed in parentheses.

Edit variables

In Motiff, you can open the edit Variable modal in two ways:

• Hover over the variable and click on the right side of the variable.
• Right-click on the row where the variable is located and select Edit variable.

In the popup for editing variables, you can perform the following actions:

1. 1.Edit the variable name.
2. 2.Add a description to explain how to use the variable.
3. 3.Modify the variable value.
4. 4.Add code syntax.
5. 5.Hide the variable during publishing.
6. 6.Set the applicable scope of the variable.

Add code syntax

Code syntax represents how the design variable appears in code, ensuring consistency in the handoff process between designers and developers.

You can set code syntax for a variable. If you add a Web code syntax, the corresponding code will display as property: Color A .

After setting the code syntax, when you are in Dev Mode and click on the layer that uses the variable, the custom code syntax will be displayed.

Motiff supports adding up to three types of code syntax for each variable, including Web, iOS, and Android. You can create a variable name for each platform:

1. 1.Right-click on the variable and select Edit variable.
2. 2.In the Code syntax modal, click on the right and select the platform type.
3. 3.Enter the variable name in the input box.
4. 4.Click the variable name to preview how it appears in the code snippet.

Scope

Setting the scope for a variable limits its application attributes. For example, you can restrict a color variable's scope to Fill, meaning the variable can only be applied to fill properties and will not be applied in stroke or effect properties.

1. 1.Right-click on the variable and select Edit variable.
2. 2.In the edit variable popup, switch to Scope.
3. 3.Select and set the applicable scope.

Edit variables in bulk

1. 1.

   Select multiple variables in the variable popup.

   • Select a range of variables: In the layer list, select the first variable, hold down the modifier key ⇧ Shift , and then click the last layer.
   • Select multiple variables: In the layer list, select the first variable, hold down the modifier key ⌘ Command / Ctrl , and then click the variables you want to select.
2. 2.

   Right-click on the selected variables and choose Edit variable.

3. 3.

   In the edit Variable modal, you can only edit the following information:

   • Scope
   • Hide when publishing

Manage variables

View local variables

Local variables are variables that exist in the current file. You can view local variables in the Variable popup.

You can follow the steps below to open Variable popup:

1. 1.Click on a blank area of the canvas.
2. 2.In the right sidebar, click in the Local variables modal.

Publish variables

Like styles and components, variables can be published to a library for team members to share and use.

Lean more about how to publish a library.