logo
Help Center/Design systems/Components/Edit instances

Edit instances

To flexibly use instances, Motiff allows you to change certain properties of the instance to fit the usage scenario.

The components typically have information that designers may need to modify, such as the text on a button or menu content.

Motiff also keeps track of the changes you make to the instances and retains them, even when you replace the instance or select different variants. 'Edit instances.png'

Supported properties

Motiff supports overrides the text, fill, stroke, and effect properties of the instances.

Can be overridden

  • Change text properties, including font, size, weight, line height, letter spacing, etc.
  • Change the fill or stroke of any layers, including fill type, color value, and opacity.
  • Add, edit, or delete any shadows or blur effects.
  • Add, edit, or delete layout grids.
  • Replace nested instances within components, such as icons in buttons.
  • Add, edit, or delete export settings.
  • Change layer names.

Cannot be overridden

  • The order of layers within an instance.
  • The position of layers within an instance, including those in auto layout.
  • The constraints of layers within an instance.
  • The bounds of any text layers. However, you can still change a text layer's resizing properties.

Tip: When you copy an edited instance, the edited properties will be retained.

Preserve overrides

When you choose to switch between different instances or variants, Motiff will attempt to retain your edited properties.

Motiff uses the following rules to determine whether to retain edited properties:

  • Layer names and hierarchy structure need to match between the current instance and the instance you are switching to.
  • The criteria are relatively lenient for preserving text overrides. Motiff will keep the changes if the name of the text layer is the same across components.

Push changes to the main component

You can choose to override the main component with your edited instance. This will apply your edits to the main component. The main component will update other instances of that component.

If the main component and the instance are in the same file, you can use the Push changes to main component feature. It is not available across files.

Note: You cannot override the main component with edits to nested instances within an instance. You need to make these changes to the main component itself.

  1. 1.Select the instance with your overrides applied to it. You need to select the instance itself, not its internal layers.
  2. 2.Click https://motiff.fbcontent.cn/public/resource/cms/image/rflp3oowl.svg next to the component name in the design panel.
  3. 3.Choose Push changes to main component.
  4. 4.Motiff will apply your overrides to the main component.

Tip: If you are working in a published component library file, you need to publish your changes to allow other instances to receive these updates.

Reset instances

Resetting an instance restores the properties of the main component. You can choose to reset the entire instance or only specific properties.

In the design panel's Instance menu, view the properties that have been edited for the current instance. You can reset individual properties or the entire instance.

  1. 1.Select the instance to view the edits for the entire instance, or select a specific layer to view edits for that layer only. Hold down the modifier key ⌘ Command / Ctrl to select nested layers within it.
  2. 2.Click https://motiff.fbcontent.cn/public/resource/cms/image/sysg004nt.svg next to the component name in the design panel.
  3. 3.Motiff will open an Instance menu where you can view the properties that have been edited for the current instance.
    • Choose Reset to reset a specific property.
    • Choose Reset all changes to reset all properties of that layer.
  4. 4.Motiff will reset the properties to match the main component.

Tip: If you want to reset all overrides, you can also reset the instance in a few other places.

  • Select the instance, right-click it, and choose Reset all changes.
  • Select the instance, click https://motiff.fbcontent.cn/public/resource/cms/image/96kiv696s.svg in the toolbar.