Create and edit 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.

Components are reusable UI elements in your design system.They consist of:

• Main components: The original version of a component that defines its properties, such as size, color, and behavior.
• Instances: Copies of the main component that inherit its properties. When you update the main component, all instances automatically sync with the changes.

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 multiple components

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.

Edit components

You can edit components to ensure they remain up-to-date and consistent across your designs. The editing process depends on whether the component is unpublished or published.

However，You can only edit the main components in the file where it is located.

Edit unpublished components

Unpublished components are local to the file in which they were created. Any changes made to the main component will automatically sync to all instances within the same file.

Edit published components

Published components are shared across multiple files through team libraries. Editing these components requires publishing updates to ensure changes apply to instances in other files.

If you’re working with an instance in another file，you should use the Go to main component feature to open the component library file. There you can edit the main component.

Go to main component

1. 1.Select an instance in the current file.
2. 2.Click icon in the right sidebar to open the file where the main component is located.
3. 3.Select the main component to edit.

Publish updates

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

1. 1.Click the 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 pop-up window confirming that you have successfully published library updates.