Create variants

There will be many similar components when you create components and 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 component library 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

Create variants

Combine as variants

To efficiently group components into variants, you can rename them and organizing them on the canvas.

1. 1.Use slash naming (e.g. Button/Primary/Large/Default/On) to define the structure:
   • Any text before the first / will become the name of the component set.
   • Each additional / will create a new property.
2. 2.Organize the components in rows, columns, or grids to clearly represent their multi-dimensional properties. Add text annotations to label related properties and values.
3. 3.Select multiple components you want to combine.
4. 4.In the right sidebar, click on Combine as variants.
5. 5.Motiff will add all components into a single component set.

Create new variants

Motiff organizes variants into a single container called a component set. Component sets can only include components.

Click Create Component in the toolbar or use the shortcut:

• 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 more variants to a component set

Variants allow you to create multiple design options within a component set. Follow these steps to add more variants:

• Select the component set and either:

  • Click in the toolbar.
  • Click at the bottom right of the component set.

• Select a variant and use the following shortcuts to duplicate it.

  • macOS: ⌘ Command + D
  • Windows: Ctrl + D

• Drag other components into the component set to add them as variants.

Set properties and values

properties and values

In a component set, you can define different variants by adding any number of properties and values to the variants, and you can even map the properties and values of the variant components to the 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 Size, State, 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 variant must be a unique combination. You don't need to create a variant for every combination of properties and values.

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.

Manage variants

Organize variants

Motiff adds new variants in a single column by default and retains the original layout when grouping components.

You can customize the arrangement by dragging variants to any position, resizing the component set in the right sidebar, or adjusting spacing with the Horizontal and Vertical icons.

The top-left variant will be used as the default representation in the Assets panel.

Assign descriptive names to properties

Motiff assigns generic names like Property 1, Property 2, etc., by default. You should rename these properties to make them more descriptive:

1. 1.Select the component set.
2. 2.View all properties in the Variant section in the right sidebar.
3. 3.Hover over a property to display a gray box.
4. 4.Click the box, enter a descriptive name, and click outside to save.
5. 5.Repeat these steps for all properties.

Manage properties and values

Properties define the variable aspects of a component set, such as size, state, or color. After creating a component set, you can manage its properties and values as follows:

• Rename: Edit property or value names in the Variants section of the right sidebar.
• Reorder: Rearrange properties to reflect their importance or logical order. Motiff will automatically update the layer names of your variants.
• Delete: Remove properties or values that are no longer needed to keep the component set organized.

Publish component set to Library

Publishing a component set makes it accessible to your team or organization, ensuring design consistency and simplifying collaboration.

Once published, the component set becomes available in the Library, where team members can easily find and use it.