Moonchild creates a complete prototype based on your design components; however, interactions are often limited to a single screen, preventing navigation 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.
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.
Go to Project Mode.
Select screens related to each other; this helps Moonchild connect them correctly in the prototype.
After selecting the screens, prompt Moonchild to create a single-screen prototype that connects all the screens for seamless navigation.
After you send your prompt, Moonchild will create a single prototype screen containing all your links.
Click on the screen, then click the play button to enter the prototype mode.
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>
Moonchild automatically links navigation elements to their corresponding screens based on context and standard UI patterns, such as a "Settings" button automatically linking to your "Settings" screen.