Create and use variants

There will be many similar components when you build a design system. For example, you might have components for buttons with different sizes and colors.

Component sets allow you to organize similar components into one container. This simplifies your libraries and makes it easier for users to find the needed components.

In the example, there is a button component set with 24 variants. The component set has four properties, each containing a set of values.

• Type: Primary button, Secondary button
• Size: Large, Small
• State: Default, Hover, Pressed
• Icon: On, Off

Motiff identifies each variant through these properties and values while displaying them as instance properties on the right sidebar.

Click next to the property value to switch to the property value as needed. Or use to turn on or off a specific property.

Customizing the properties and values of your variants and naming the deliverables carefully can eliminate disagreements from your design system, avoid guesswork, and align your components more closely with front-end code.

Variant properties and values

In a component set, you can define different variants by adding any number of properties and values to the variants. You can even map the properties and values of the components sets to code components in the design system.

• Variant properties are the variable aspects of the component. For example, the properties of a button component could be Type , Status , or Color .
• Values are different options available for each property. For example, the values for the state property could be Default , Hover , Pressed , Disabled .

All variants in a component set share a set of properties and values, but each variants must be a unique combination. You don't need to create a variant for every combination of properties and values.

Rename components

Motiff uses slash naming to organize components in the Assets panel and the Instance menu. Each / in the component name will form a new hierarchical structure.

This makes it easier to navigate your library or find and swap related components.

You can also use a specific naming structure to convert existing components into variants. For accurate conversion, the component name needs to follow the following structure:

• Any text before the first / will become the name of the component set. Each additional / will create a new property.
• By default, Motiff will name the first property Property 1, followed by Property 2, Property 3, and so on.

For example, one of our button component has the following name: Button/Primary/Large/Default/On .

After conversion, the generated variant will look like the following:

Component set name: Button

Property 1: Primary

Property 2: Large

Property 3: Default

Property 4: On

In the image below, we can see how the component name (on the left) is converted into variant property values (on the right).

Organize components on the canvas

If a particular component has many variants, you might want to organize the components in rows, columns, or a grid. This will help convey their multi-dimensional characteristics to anyone who is using your design system. You can also add text next to the component set to annotate the related properties and values.

In the example below, we have arranged the button variants in a grid. We have also added text annotations on the canvas corresponding to the property values.

Combine as variants

1. 1.Select multiple components you want to combine.
2. 2.In the right sidebar, click on Combine as variants.
3. 3.Motiff will add all components into a single component set.

Assign descriptive names to properties

Since Motiff doesn't know the property names you need, it will name the first property as Property 1, followed by Property 2, Property 3, and so on after grouping.

You need to rename these properties to more descriptive names.

1. 1.Select the component set.
2. 2.View all properties in the Variants section in the right sidebar.
3. 3.When hovering over the property, a gray box will be displayed.
4. 4.Click to edit the property and give it a more descriptive name.
5. 5.Click outside the property to apply the new edit.
6. 6.Repeat the above steps for the remaining properties.

Create new variants

Motiff places variants in one container called a component set. Component sets can only contain components. Click on Create component in the toolbar, or use the shortcuts to create a component:

• macOS: ⌥ Option + ⌘ Command + K
• Windows: Ctrl + Alt + K

You can click in the right sidebar to add a variant. This will duplicate the current component and group these two components into a component set.

At this point, Motiff will:

• Add both components as variants to the component set.
• If using the slash naming convention, the text before / will become the name of the component set, and the properties after will be used as values.

You can also create a new variant by grouping multiple components.

Add properties and values

When creating a component set for the first time, you need to add new properties and values to the component set.

1. 1.Select the component set.
2. 2.Click in the right sidebar and choose Add property.
3. 3.Name the property.
4. 4.Select one of the variants to define the property value just added.

Add more variants to a component set

Continue adding variants to your component set using any of the following methods:

• Select a component set and click in the toolbar.
• Select a component set and click at the bottom right of the component set.
• Use shortcuts to duplicate existing variants:
  • macOS: ⌘ Command + D
  • Windows: Ctrl + D
• Drag other components into the component set to add them as variants.

Manage variants

Organize variants

When you add new variants to a component, Motiff defaults to adding variants in a single column with equal spacing between them.

When grouping component sets, Motiff retains the layout of the components before the grouping process.

You can modify Motiff's default arrangement to what you need.

• Select a variant and move it to a new coordinate within the component set. Motiff allows you to place variants anywhere in the component set, including on top of other variants.
• Adjust the dimensions of the component set in the right sidebar, similar to resizing the container.
• Select all variants: Use horizontal and vertical spaces in the right sidebar to adjust the horizontal and vertical distance between variants.

Manage properties and values

After creation, you can rename and reorder properties and values, or delete properties that are no longer needed.

• If you reorder properties, Motiff will adjust the layer names of your variants.
• If you have converted an existing component into a component set, you need to rename your properties in a more descriptive way.

Publish component set to Library

Publish component sets along with styles and regular components to enable members of your team or organization to use them.

Component sets are displayed in the Assets panel along with other components. Motiff will use the top-left variant of the component set as the default variant.

Collaborators can drag the component set into their files to create instances. They can select other variants under the component set by configuring property values in the right sidebar.

Use variants

Component sets are displayed in the Assets panel along with any regular component. Rather than trying to find specific variants in the panel, you can just select the component set.

After creating an instance of the component set on the canvas, you can configure the instance's property values to select a variant.

Select component sets

Click the Assets tab in the left sidebar, or use the shortcut:

• macOS: ⌥ Option + 2
• Windows: Alt + 2

Click on the component set and drag it onto the canvas. Motiff will create an instance of the default variant of that component set.

Configure variants

Select other variants within the component set by configuring property values in the right sidebar.

1. 1.Select the instance.
2. 2.View the component's name in the right sidebar. If the component has variants, you will see the properties and values for configuring that component set under the component name.
   • Use icon next to the property to select the property value you need.
   • Use to turn a specific property on or off.

Override preservation

When you choose to swap between different instances, Motiff will attempt to preserve your overrides.

Motiff uses the following rules to determine whether to preserve the overrides:

• Layer names and hierarchy need to match between the current instance and the instance you are switching to.
• When selecting a variant, Motiff will also check if the layer properties you have overridden are matched between variants. If so, Motiff will preserve your edits.

For example: In the operations below, Motiff preserved the fill override in step 3 but did not preserve the override in step 4. This is because Motiff will preserve edits of the same layer name with the same property value. Primary Button-Icon On and Primary Button-Icon Off have the same blue #3071FF fill. After changing the fill of the Primary Button-Icon Off variant instance from #3071FF to pink #F531A0 and switching to the variant of Primary Button-Icon On , the override will be preserved.

When switching to the variant of Secondary Button-Icon On , Motiff will not preserve the override because the fill of this variant is white #ffffff , which is inconsistent with the property value of the variant before switching.