Create and manage component instances

Component instances allow you to reuse and customize design elements efficiently while maintaining consistency across your project.

In Motiff, you can create instances from components, override their properties, reset them, detach them, or even swap them with other components.

Create instances

You can find components in the Assets panel and drag the component to the canvas to create an instance of it.

1. 1.Select the Assets panel in the left sidebar or use the shortcut:
   • macOS: ⌥ Option + 2
   • Windows: Alt + 2
2. 2.Find the component you want to use.
   • Local components: Components created within the current file.
   • The required components for this file: Components in this file applied from other component libraries.
   • Enabled component library: You can explore the needed component library in the Libraries modal. After applying, it will be shown in the Assets panel.

1. 3.

   Drag the component to the canvas to create an instance of the component.

Override properties of instances

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

• Can be overridden: Text, colors, visibility, and other style properties like fill and stroke.
• Cannot be overridden: Structural properties, such as layer order, grouping, or locked elements within the main component.

When switching between instances or variants, Motiff attempts to retain your overrides based on these rules:

• 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 text layer's name is the same across components.

Reset instances

If you're not satisfied with your edits to an instance, you can reset it to match the main component. You can reset the entire instance or 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 on the 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.

Push changes to the main component

If you're satisfied with your edits to an instance, you can apply them to the main component. This will update the main component and all its other instances.

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.

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 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.

Swap instances

If you need to replace an instance with another component while maintaining its position and overrides, you can swap the instance.

Instance menu

The Instance menu allows you to find and replace components from the current file and any used component libraries. After selecting a component, you can access this menu from the properties panel in the right sidebar.

1. 1.

   Select the instance you want to replace, and Motiff will display the component's name in the instance section on the right sidebar.

2. 2.

   Click on the component's name to open the Instance menu.

3. 3.

   Use the menu to navigate through components:

   a. Use to search for components by name.

   b. Click to switch between referenced component libraries.

   c. Click to go back to the previous directory.

4. 4.

   Choose an instance to replace with.

   Tip: Motiff categorizes and displays components according to their name, the page they belong to, and the frame they're located in.

   • Components with the same hierarchical structure are considered related components. The hierarchical structure includes files, pages, and frames.
   • Motiff also groups components named with the slash. Components that have the same parent name are also considered related and grouped under the same category. For example: Motiff considers Button/Primary button/Click, Button/Primary button/Hover, and Button/Primary button/Disabled as related components because they share the common parent name Button/Primary button. Learn more about how to name and organize components.

Assets panel

1. 1.Open the Assets panel and find the component you want to replace.
2. 2.Hold down the modifier key ⌥ Option / Alt to replace.
3. 3.Drag the component above the instance you want to swap in the canvas.
4. 4.Release the mouse, then release the modifier key. If you release the modifier key first, Motiff will only add the new component, not replace it.

Detach instances

If you need to modify properties locked by the main component or stop receiving updates from it, you can detach the instance.

Instance menu

1. 1.Select the instance you want to detach.
2. 2.Click on icon the instance section.
3. 3.Choose Detach Instance from the menu.

Context menu

1. 1.Right-click on the instance on the canvas or in the Layers panel.
2. 2.Choose Detach instance from the menu.

Use shortcut

Select the instance you want to detach and use the shortcut keys to detach the instance:

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