Prototype Playback

1. Entry

You can preview the prototype in 3 ways:

Click the Play button on the top right corner.

Hover your mouse on the flow list from the right panel and click the Play button displayed.

Click the Play button on the top left corner of the frame.

2. Device Model

You can add different device models to imitate the real effect. In demo mode, click the drop-down menu in the top right corner to choose the model you want.

Tip: You can also switch between the vertical and horizontal screens.

3. Share Prototype

In demo mode, click the Share button on the top right corner and you'll see a pop-up window. Click the Copy button to share your prototype file to others. In this way, people can access the demo interface of your prototype via the link you share with them.

4. Preview Scale

Demo mode supports 4 preview scales and 2 independent settings, with which you can set based on your preference.

• Full view: A display mode that aligns the top or width of the frame to show all content within the frame, with automatic spacing at the edges.
• Zoom to 100%: Display size that completely matches the actual size of the frame at 100%.
• Fit to Screen: Automatically adapt the width in the preview interface, aligning the width of the frame with the display area.
• Fill Screen: Automatically adapt based on the width and height ratio. For a long page, the height is aligned with the display area. For a wide page, the width is aligned with the display area.
• Highlight interactive area: The interactive area will always remain highlighted.
• Hide operation interface: Directly hide all operation interfaces.

Tip: Click the Full screen button on the top right corner to enter the full view mode. In this way, you can maximize the browsing of wide content.

5. Switch Preview Frame

Click the left and right arrow keys(shortcut:<- ->) on the top to switch frames. You can also click the Restart button(shortcut: R) to return to the first frame quickly.

6. Highlight Hot Zone

Click any place in the preview background, the hot zone with interactive event will be highlighted.

Tip: Press Shift + 8 to keep the hot zone highlighted all the time.

7. Interaction Flow

There will be a flow list on the left side of the preview page, and you can check a certain flow or locate the frame with a certain flow here.

8. Immersive Mode

Click any place in the preview background or trigger the interaction to enter immersive mode. In this mode, all operation interfaces will be hidden to reduce interference. Click in the background space again to return to the operation interface.

Tip: Press Shift + 9 to keep in immersive mode all the time.

Guide collaborators through a presentation

Spotlight mode lets other participants follow your view during a prototype presentation.

1. Open the prototype presentation.
2. Hover over your avatar in the top bar.
3. Choose Follow my view to invite the other participants to follow.
4. Move through the prototype to guide participants who join the session.

You can also select another participant's avatar to follow their view. The presentation is shared; a following participant sees the presenter's view of the prototype rather than their other applications.

Choose how interactive areas are highlighted

• Off: interactive areas are not highlighted.
• Flash: clicking a non-interactive part of the presentation briefly highlights the available interactive areas.
• Always on: interactive areas stay highlighted, which helps reviewers who are opening the prototype for the first time.

Choose a setting that suits the review. Flash or always-on highlighting helps people find the intended controls; turn highlighting off when you want to see whether the interface itself makes the available actions clear.

Return to the presentation controls

When the controls are hidden, press Esc to show them again. From the flow list on the left, choose a flow or a frame within it to continue the review from another starting point.