Create components

To enhance design efficiency and maintain consistency in your designs, you can create components from elements with high reusability. For example: buttons, icons, input boxes, etc.

Create components

You can create a single component or create components in bulk.

Create a single component

1. 1.

   Select the layer you want to create as a component.

2. 2.

   You can create a component in the following ways:

   • Click in the toolbar.
   • Choose Create component from the right-click menu.
   • Use the shortcut keys:
     • macOS: ⌥ Option + ⌘ Command + K
     • Windows: Ctrl + Alt + K
3. 3.

   Once created, the selected layer will be nested in a component frame, and the Layers panel will show a purple icon to identify the component.

Create components in bulk

By default, creating a component turns your selected layer into one component. You can use the Create multiple components feature to create separate components from multiple selected layers.

1. 1.Select multiple layers you want to create as components.
2. 2.Click next to in the toolbar.
3. 3.Choose Create multiple components from the dropdown menu.
4. 4.Motiff will create separate components from each of the layers you selected.

Delete components

You can delete a main component at any time. Deleting a main component does not remove instances of that component from your files.

1. 1.Select the component you want to delete.
2. 2.Press Delete .

Restore components

If a main component is deleted, you can use an instance of that component to restore it.

Restore from the right sidebar

1. 1.Select the instance of the deleted main component.
2. 2.Do one of the following actions to restore the component:

   • If you are in the library file that contained the main component, click the Restore main component button from the properties panel in the right sidebar.

   • If you are in a file that did not contain the main component, click Go to main component. In the Restore component modal, click the Restore button.

Restore from the right-click menu

1. 1.Select the instance of the deleted main component, right-click.
2. 2.Choose Go to main component from the right-click menu.
3. 3.In the Restore component modal, click the Restore button.

Sync of components and instances

• Unpublished components: You can edit a main component like any other layer, and Motiff will automatically synchronize all changes you make to the main component with instances in the current file.
• Published components: Any changes you make to the main component will also be immediately synchronized with instances in the current file. If you want to synchronize these changes with instances in other files, you need to publish these changes to the component library and update the instances in the files that reference them to synchronize the changes of the main component.