Build and present a prototype

Build a basic prototype by connecting frames and then opening the preview or presentation surface. Keep screen names and connection labels clear so the flow remains understandable as it grows.

The representative video demonstrates this exact workflow: Open the real presentation preview for a selected frame without demonstrating the unavailable Prototype Add interaction control.

Verified result: The file preview is open as a modal presentation surface and the source frame remains selected in the editor.

Present a prototype frameOpen the real presentation preview for a selected frame without demonstrating the unavailable Prototype Add interaction control.Result: The file preview is open as a modal presentation surface and the source frame remains selected in the editor.

Transcript

1. Present the fileChoose Present to open the current file in its presentation preview. This step previews the file; it does not add an interaction.

Download the tutorial videoDownload English captions

Prerequisites

• Put each screen in its own frame on the same page.
• Give the frames clear names in Layers.
• Open the file with edit access.
• Use a mouse, trackpad, or other precision pointer for connector authoring. Touch can inspect existing connections, but connector editing is currently limited on touch-only devices.

Steps: connect two screens

1. Choose Connector in the toolbar.
2. Move the pointer over the starting frame or object until its connection points appear.
3. Start from the connection point that best communicates the direction of the flow.
4. Finish on the destination frame or object.
5. Select the connector and open the Prototype panel.
6. Adjust the start and end points, path style, line style, stroke, width, opacity, or arrow as needed.
7. Give the connection a useful label when more than one path leaves the same screen.
8. Repeat for each route that a presenter needs to demonstrate.

Use Undo immediately if you connect the wrong screens. Deleting a connector removes that route without deleting either screen.

Steps: preview and present

1. Check that every intended start screen and destination is visible on the current page.
2. Choose Present in the top bar, or open the prototype preview from the Prototype surface when it is offered.
3. Choose the intended flow if the preview lists more than one.
4. Use Play, Restart, Reload, or Back in the preview to test the route from a known starting state.
5. Test every branch in the order a viewer will encounter it.
6. Close the preview to return to the same editing canvas.

Before presenting to others, test the flow at least once after renaming, moving, duplicating, or deleting a screen. Those edits can make an otherwise clear route harder to understand even when its connector still exists.

Recovery

• If no connection points appear, select a single visible, unlocked frame, shape, or text object. Pages, existing connectors, hidden objects, locked objects, and multi-selections cannot start a new connection.
• If the Connector tool does not start on a touch device, move to a pointer-equipped device for authoring. Do not keep tapping the disabled Prototype control.
• If the line attaches to the wrong side, select it and change its endpoint in the Prototype panel, or delete it and draw it again.
• If preview opens on the wrong screen, return to the flow list and choose the intended flow or start screen.
• If preview is empty, confirm that the frames are on the current page and that the route has a valid destination.
• If a deleted or moved screen breaks a route, remove the stale connector and create a new one between the current frames.

Current limitations

• The Add interaction button in the Prototype panel is currently unavailable in Editor v2. Create connections with the Connector tool from the toolbar and canvas instead.
• Touch-only connector creation and editing is currently read-only. Existing connections can still be inspected; use a precision pointer to author them.
• A connector communicates a route between objects, but it does not guarantee support for every advanced trigger, transition, variable, gamepad, or cross-page behavior from other prototyping tools.
• Test the actual preview you plan to present. Canvas connector appearance alone is not proof that every route starts from the intended screen.