Moonchild creates a complete prototype of your designs based on the components present in your design; however, often the interactions are limited to a single screen, and you cannot navigate from one screen to another in the prototypes.

Adding screen-to-screen interactions means creating prototypes that allow users to navigate from one screen to another according to the user flow. In Moonchild, these interactions happen through navigation elements, i.e., clicking a button, menu item, or card, which loads the next screen. Understanding how to create and manage these interactions helps you build functional, testable prototypes.

How Moonchild Creates Navigation Automatically

Moonchild automatically generates navigation based on context and common user interface patterns. For instance, if your design includes a "Students" navigation item and you have created a “Students” screen, Moonchild will connect the two. Likewise, a "Settings" menu item will lead to the Settings screen, and "Back" buttons will allow users to return to previous screens.

Click through your designs in Prototype Mode to test which interactions are already working before manually adding more.

Creating Navigations Manually

• Go to Project Mode.
• Select the screens that are related together (shift + click the screens); this helps Moonchild connect them correctly in the prototype.
• It is advisable to start with related screens and include the intended user flow. This helps Moonchild to create
• Once the screens are selected, prompt Moonchild to create a single-screen prototype that connects all the screens to create seamless navigation for them.

• After you send your prompt, Moonchild will create a single prototype screen containing all your links.

• Click on that screen and click the play button to enter the prototype mode.

Testing Your Interactions

Once your screens are linked, walk through complete user journeys from beginning to end. Start at the entry point (often a dashboard or home screen) and complete realistic tasks: enrolling a student, generating a report, and updating settings. Notice where flows feel natural and where they feel awkward—then refine from there.

Pay attention to context and state as you navigate. Does information carry over between screens appropriately? If you select a student on one screen, does their information appear correctly on the detail screen? These details make prototypes feel realistic and help stakeholders understand the complete user experience.

<aside>

Did this answer your question?

If you have any further questions, please reach out to: [[email protected].](mailto:[email protected].)

</aside>