The Prototype Mode interface is designed to test and experience your designs as interactive applications. While it shares some similarities with Design Mode, the emphasis here is on interaction and validation instead of creating new designs. Familiarizing yourself with the layout will help you test user flows effectively, demonstrate functionality, and refine your prototypes.

Key Interface Areas:

• Left Sidebar – Version & Editing Controls:

  

  • Version dropdown: Switch between different iterations of your design.
  • Prompt field: Use the prompt field to precisely edit elements (learn more about the Select tool here).

• Top Navigation Bar:

  

  • Back/Forward arrows: Navigate through your browsing history.
  • Screen name: Displays the title of the current screen (e.g., "Dashboard UI").
  • Refresh button: Reloads the prototype to its initial state.

• Center Canvas - Interactive Prototype:

  

  • Your design is displayed in full interactive mode.
  • Click on elements to test interactions and flows.
  • You can scroll and navigate as users would in a real application.
  • Visual feedback is provided for hover and click states.

• Top Control Bars:

  

  • Select button: Activate Edit/Selection Mode.
  • View options: Choose from different display modes.
  • Share button: Generate links to share your prototype.
  • Menu: Access additional settings and options.

The interface is intentionally designed to minimize distractions, keeping tools tucked away so you can concentrate on the prototype experience. This clean layout allows you to view your design from a user’s perspective rather than from a designer’s workspace.

<aside>

Did this answer your question?

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

</aside>