logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Design systems/Variables/Variables

Variables

Variables allow you to store reusable property values that can be quickly applied and adjusted in batches.

By defining different values for the same variable across various design themes, you can easily create multi-theme designs such as dark mode or diverse brand color schemes.

Note: Variables can store raw values like colors, numbers, and strings. Currently, Motiff supports color variables, with other variable types coming soon.

'Variables-01.png'

To better understand the Variables, you can familiarize yourself with the following core concepts:

  • Variable: Stores specific values of design properties, such as color codes.
  • Collection: Manages and organizes variables into categories.
  • Group: A further classification within a collection to organize variables.
  • Mode: A set of variable values for a theme within a collection.
  • Alias: Allows one variable value to reference another variable. 'Variables-02.png'

Variables

When a variable is modified, Motiff synchronizes the modification to all layers that use this variable.

Color variables

Color variables can store the values of color property, making the implementation of multi-theme designs easier.

They can be applied to fill properties, stroke properties, color styles, etc. 'Color variables-01.png'

Collections

Collections help manage and organize variables. You can categorize related variables by feature or design context. For example, use one collection for basic colors and another for referenced colors.

For instance:

  • Use Primitive Colors to manage the basic colors in your team.
  • Use Semantic Colors to manage the specific uses of basic colors. 'Collections-01.png'

Note: Motiff supports having up to 5,000 variables per collection.

Groups

Within a collection, groups provide additional classification to help organize variables.

For example, create groups for Brand , Black , and White to further manage color variables. 'Groups-01.png'

Tip: You can use / in variable names to rename them. Motiff will automatically group the variables.

Modes

Modes are sets of variable values for a theme within a collection.

Motiff allows defining multiple values for the same variable to support different design themes, such as light mode and dark mode. 'Modes-01.png'

Tip: Motiff supports adding up to 99 modes per collection.

Alias

Alias allows one variable value to reference another variable.

When the referenced variable changes, all aliases linked to it will update automatically to keep the design consistent.

For example, if the variable Brand 1 has the value #3071FF , and you want the default fill to use the same color, you can create another variable Fill-Primary and use the Alias feature to reference the variable Brand 1 .

'28 (6).png'

If the value of Brand 1 changes, Fill-Primary will update accordingly. '30 (6).png'

Alias can increase the flexibility of variables, making updates and management of design systems more efficient.

For instance, you can create an original variable Brand 1 , define variables like Fill-Primary , Border-Select , Text-Highlight , reference the original variable, and apply it to layers such as switches, buttons, input fields, etc.

If the value of Brand 1 changes, all layers using this variable will update simultaneously.

If you only want to change the fill color of the component, you can use the Alias feature to reference the variable Purple 1 again. In this case, the fill color of switches and buttons will change.

Tips: