Get started with prototype

Motiff supports creating interactive flows with Prototype, simulating the real interaction process between users and products.

It allows you to visualize user journeys, test interactions, share ideas and gather feedback from collaborators to refine your designs.

Make a prototype

A prototype can simulate multiple interaction flows of a user in an app or webpage, or some specific interaction experiences of users.

Flows in prototype

A flow consists of a flow starting point, connections, and a destination. You can create multiple flows on the same page. For example, a music app prototype may include different flows such as registration login, music playback, song search, etc.

Flow starting point

When you add a connection between two frames, Motiff will create a flow starting point.

You can also add a flow starting point in the following two ways:

• Select the starting frame, switch to the Prototype panel in the right sidebar, and click in the Flow starting point section.
• Right-click the starting frame and select Add starting point.

Connections

Connections are the carrier of the interaction flow, which is the blue connecting line between the starting point and the destination.

1. 1.

   Switch to the Prototype panel in the right sidebar.

2. 2.

   Select a layer as the hotspot.

3. 3.

   You can create interactions in the following ways:

   a. Hover the cursor over the layer, click and drag to connect to the destination frame.

   b. In the Interactions section of the Prototype panel, click to add interaction.

Set interaction properties

After you have created an interaction, you can set the following interaction properties in the interaction settings modal.

1. 1.Trigger: Determines the action type that initiates this interaction, such as mouse clicks or touch gestures.
2. 2.Action: Defines the type of event that occurs when the user interacts with the hotspot, including navigating to another frame, opening an overlay, scrolling and overflow, etc.
3. 3.Destination: Defines the layer that the interaction ultimately points to. The destination can be another screen in the prototype, or an overlay in the current screen. When the action type is Back, the interaction has no destination, but automatically returns to the previous frame after being triggered.
4. 4.Animation settings: Defines the visual effect of the prototype switching from one frame to another. You can achieve personalized adjustment by setting the type, speed, and direction of the animation.
5. 5.Easing: Easing determines the transition acceleration of the animation from the starting point to the destination. By adding preset or custom easing animations, you can create smooth dynamic effects for prototype design, making the prototype closer to the real experience.

Present prototype

Prototypes simulate the process of user interaction with the design. You can view and test the design before development through the presentation view to see the actual effect of its interaction. Learn more about Present your prototypes.

Adjust prototype settings

To ensure a more realistic and accurate preview of your prototype, you can set the prototype device and background in the Prototype panel in the right sidebar.

1. 1.Device: You can customize the type, orientation, and model of the device used in the preview view.
2. 2.Preview: You can preview your prototype to make the presentation of the prototype more realistic.
3. 3.Background: You can set the background color when playing the prototype in the presentation view.
4. 4.Flows: You can view and manage the prototype flows on the current page.

Share prototype

When you need to share your design to get feedbacks, you can share the entire prototype or copy the link of a specific flow.

Share files with prototype

If you want to share the entire prototype, you can click the Share button in the right sidebar and choose to share via email invitation or link.

• Email invitation: Click next to Can view and select Can view prototype. Then, enter the email addresses and click Send invite to share the prototype.

  Tip: To invite multiple people, separate each email address with a comma.

• Copy links: In the Share with link section, click and select Anyone with the link can view prototypes . Then you can click Copy link and share it. You can also choose to add a password to the link if needed.

Copy flow links

If you want to share a specific flow, you can copy the flow links in the file:

1. 1.Select a frame with a flow starting point.
2. 2.Switch to the Prototype panel in the right sidebar.
3. 3.Hover the cursor over the Flow starting point section.
4. 4.Click to copy the link

You can copy the flow links in the presentation view:

1. 1.Select the flow you want to share from the left sidebar.
2. 2.Click Share prototype in the toolbar.
3. 3.Click to copy the link.