Use and override variants

Variants help designers quickly adapt components to different needs without creating new designs. By switching between properties and values, you can customize components directly on the canvas.

Motiff displays variant properties in the right sidebar as instance properties:

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

Use variants

Component sets are available in the Assets panel alongside regular components.

Instead of searching for specific variants, you can directly select the component set and create an instance.

1. 1.Click the Assets tab in the left sidebar, or use the shortcut:
   • macOS: ⌥ Option + 2
   • Windows: Alt + 2
2. 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.

Toggle variants

After creating a component instance, you can select and configure its variant properties:

1. 1.Select the instance on the canvas.
2. 2.In the right sidebar, view the component's name and its available properties.
3. 3.Click next to a property to select a value or toggle specific properties on/off.

Override preservation

When switching between instances or variants, Motiff attempts to preserve your overrides to ensure a consistent design experience. Overrides are preserved based on the following rules:

• If the layer names and hierarchy in the current instance match those in the instance you are switching to
• If the overridden property values (e.g., color, size) match between variants, Motiff will retain the overrides.

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. When changing the fill of the Primary Button-Icon Off variant instance from #3071FF to pink #F531A0, and then 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 this variant's fill is white #ffffff, which is inconsistent with the property value of the variant before switching.