Guide to prototyping in Motiff
Motiff supports creating interactive flows with Prototype, simulating the real interaction process between users and products.
Prototype plays an important role in the following scenarios:
- Preview user interaction flows.
- Share design ideas with others and quickly iterating ideas.
- Receive direct feedback from collaborators by presenting prototypes.
- Test user interactions with high-fidelity prototypes.
Tip: You can use shortcuts ⇧ Shift + E to quickly switch between the Design panel and the Prototype panel.
Flows and interactions
A prototype can simulate multiple interaction flows of a user in an app, webpage, or some specific interaction experiences of users.
Creating a flow
A flow consists of a starting point, connection, and 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.
Note: A frame can be added to multiple flows, but each top-level frame has only one flow starting point. The sub-frames of the top-level frame can connect to multiple other flows. For example, the Login and Register buttons in the same top-level frame can connect to different top-level frames to simulate corresponding flows.
Tip: When you first add a connection line between two frames, Motiff will default to adding a flow starting point for the first frame.
Connections
Connections are the carrier of the interaction flow, which is the blue connecting line between the starting point and the destination.
You can create connections between layers in the following ways:
- 1.
Switch to the Prototype panel in the right sidebar.
- 2.
Select a layer as the hotspot.
- 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.
Tip: You can add connections from multiple layers pointing to the same destination frame at the same time. You just need to select multiple layers on the canvas, then click and drag to connect the line to the destination.
Interaction settings
After you have created an interaction, you can set the following interaction properties in the Interaction modal.
- 1.Trigger: Determines the action type that initiates this interaction, such as mouse clicks or touch gestures.
- 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.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.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.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.
View flows
When you have completed the prototype design, you can view all the flows on the current page through the following steps.
- 1.Click on a blank area of the canvas to deselect all layers.
- 2.Click and switch to the Prototype panel in the right sidebar.
- 3.View all flow starting point lists in the Flow section.
- 4.Hover the cursor over the target flow name and click
to quickly locate to the top-level frame where the flow starting point is located.
Share flows
When you need to share your design to get feedbacks, you can share the entire prototype or copy the link of a specific flow.
Copy flow links
You can copy the flow links in the file through the following steps:
- 1.Select a frame with a flow starting point.
- 2.Switch to the Prototype panel in the right sidebar.
- 3.Hover the cursor over the Flow starting point section.
- 4.Click
to copy the link.
You can copy the flow links in the presentation view through the following steps:
- 1.Select the flow you want to share from the left sidebar.
- 2.Click Share prototype in the toolbar.
- 3.Click to copy the link.
Adjust prototype settings
You can set the prototype device and background, as well as view and manage the prototype flows on the current page in the Prototype panel in the right sidebar.
- 1.Device: You can customize the type, orientation, and model of the device used in the preview view.
- 2.Preview: You can preview your prototype to make the presentation of the prototype more realistic.
- 3.Background: You can set the background color when playing the prototype in the presentation view.
- 4.Flows: You can view and manage the prototype flows on the current page.
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.