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/Swap components and instances

Swap components and instances

When building interfaces, it is often necessary to use components such as icons, buttons, and cards in different scenarios. The Instance menu allows you to quickly search, preview, and swap one component for another. Below are two methods for replacing instances in Motiff.

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 Design panel in the right sidebar.

Motiff categorizes and displays components according to their name, the page they belong to, and the frame they are 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 same parent name Button/Primary button .

'Instance menu 2.png'

Use the Instance menu to swap an instance:

  1. 1.Select the instance you want to replace, and Motiff will display the component name in the instance section on the right sidebar.
  2. 2.Click on the component name to open the Instance menu.

'Instance menu 3.png'

  1. 3.

    Use the menu to navigate through components:

    a. Use https://motiff.fbcontent.cn/public/resource/cms/image/fdl3569v1.svg field to search for components by name.

    b. Click https://motiff.fbcontent.cn/public/resource/cms/image/bhp1ssh9d.svg to switch between enabled libraries.

    c. Click https://motiff.fbcontent.cn/public/resource/cms/image/ztoxvgyxt.svg to go back to the previous group.'Asset panel.png'

  2. 4.

    Choose an instance to replace with.

Assets panel

In the Assets panel on the left sidebar, you can search for the components you need.

Drag a component onto the canvas to create an instance. If you use a modifier key while dragging the component, you can replace an existing instance.

  1. 1.Open the Assets panel and find the component you want to replace.
  2. 2.Hold down the modifier keys ⌥ 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 add the new component without replacing it.