The Prototyping Interface is designed to test and experience your designs as interactive applications. While it shares some similarities with the Design Interface, the emphasis here is on interaction and validation rather than creation. Familiarising 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 for precise editing of elements (learn more about editing mode here).
- This sidebar is collapsed by default to maximize the viewing space for your prototype.
- 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-Right Controls:
- 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.