logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Design systems/Components/Edit main components

Edit main components

Any instance you create is linked to the main component. When you modify the main component, Motiff will sync the changes to all linked instances.

To ensure Motiff sync the changes to all instances, you can only edit the main component in the file where it is located.

  • Unpublished component: You can edit the main component like any other layer. Motiff will automatically sync any modifications you make to the main component to instances in this file.
  • Published component: The modifications you make to the main component will be immediately sync to instances in this file. If you want to sync these changes to instances in other files, you need to publish the changes to libraries and update the instances in the files that apply them.

Tip: To change the location of a component, you can move published components between files and the component library.

Find main component

In the file with an instance of the component, if you want to edit the main component, use the Go to main component feature to open the component library file. There you can edit the main component.

  1. 1.Select an instance in the current file.
  2. 2.Click '16_layer_main component out.svg' in the right sidebar to open the file where the main component is located.
  3. 3.Select the main component to edit.

'Edit main components.png'

Tip: If you accessed the main component from another file, you can return to the instance file after making the changes.

Push changes to main component

In some cases, you may want to apply the modifications of an instance to the main component.

You can use the Push changes to main component feature to apply the instance changes to the main component. As the main component updates, other instances will be updated synchronously.

The Push changes to main component feature can only be used in the case when the main component and instance are in the same file. This feature cannot be used when the component and instance are across different files.

Note: When an instance is nested within another instance, changes to the inner instance cannot be directly applied to its main component.

  1. 1.Select the instance you have modified. You need to select the parent container of the instance, not the child layer.
  2. 2.In the right sidebar, click '16_panel_more.svg' next to the component name.
  3. 3.Choose Push changes to main component from the menu.
  4. 4.Motiff will apply the changes of your instance to its main component.

'Edit main components 2.png'

Publish updates

Changes you make to published components or styles will only synchronize to instances in the current file. If you want these changes to be synchronized to instances in other files, you need to publish the updates to the component library.

When a blue dot appears on the top of '16_Panel_ComponentLibrary.svg' on the Assets panel in the left sidebar, it indicates that you have updates to publish:

  1. 1.

    Click '16_Panel_ComponentLibrary.svg' at the top of the left sidebar to open the Component modal.

  2. 2.

    Select the Local library, click Publish.

  3. 3.

    Review the list of changes in the component library. This provides details about any added, changed, or deleted components and styles.

  4. 4.

    Select the changes you want to publish:

    • Check the components you want to publish.
    • Uncheck the components you do not want to publish.
  5. 5.

    Add a description of the updates (optional), which will be displayed in the component library update list.

  6. 6.

    Once you have made your selection, click Publish. You will see a prompt on a popup confirming that you have successfully published library updates.