Prototypes simulate user’s interaction with the design, allowing you to view and test the design before development. Motiff supports the **Present** feature for you to view the actual effect of prototype interactions. # Prepare prototypes to present The settings of the frame and its connections in the canvas affect the presentation effect of the prototype. * The prototype content for presenting needs to be within a frame. * If there are prototype connections, Motiff will only display frames with connections when presenting the prototype. * You can set the starting point of the flow to determine the starting point of the presentation. Motiff supports setting multiple flow starting points at the same time. * In presentation view, you can select the device type, starting point, and background color of the prototype in the prototype settings. # Present the prototype ## Enter presentation view You can enter the presentation view in the following two ways: * Click !['24_Toolbar_Present.svg'](https://static.motiffcontent.com/public/resource/cms/image/jg4uclwho.svg) on the right side of the top toolbar. * Use keyboard shortcuts: * macOS: ⌘ Command + ⌥ Option + Return * Windows: Ctrl + Alt + Enter !['present.png'](https://static.motiffcontent.com/public/resource/cms/image/d4ul2d7dr.png) In presentation view, you can: * Click !['24_Toolbar_SidebarOn.svg'](https://static.motiffcontent.com/public/resource/cms/image/ymlfl5pda.svg) to show or hide the left sidebar. * Click !['24_Toolbar_Comment (2).svg'](https://static.motiffcontent.com/public/resource/cms/image/8ightw2xv.svg) to add comments to the prototype. * Users with **Can edit** access can click !['16_Common_ArrowDown.svg'](https://static.motiffcontent.com/public/resource/cms/image/8137at5pc.svg) next to the file name to enter the editor and select the corresponding frame layer. * Click **Share prototype** to share the prototype. * Click **Options** to set presentation view options. * Click !['16_Panel_Scale.svg'](https://static.motiffcontent.com/public/resource/cms/image/u0o936h3a.svg) to enter or exit full-screen view. * Click on the flow in the left sidebar to view and select the flow. Right-click on the line where the flow is located, select **Copy link to flow** and copy the prototype link. * Click `<` or `>` at the bottom of the toolbar to switch frames. * Click !['16_Panel_Reset.svg'](https://static.motiffcontent.com/public/resource/cms/image/5qo691of7.svg) or press the shortcut key R to return to the current flow's starting point. If there is no flow, it will return to the previous frame on the canvas. ## Presentation settings In the **Options** menu, you can make the following settings: !['presentation settings.png'](https://static.motiffcontent.com/public/resource/cms/image/wie6ma3pv.png) ### Zoom settings You can choose from: * **Actual size (100%)**: Display the prototype according to the real size of the frame, which may cause part of the prototype area to be cropped. * **Fit to screen**: Scale the prototype to fit the viewer's screen size. * **Fit width**: Scale the prototype so that the width fits the viewer's screen size. This item is only displayed to users who have not set a prototype device. * **Fill screen**: Scale the prototype so that it fills the entire display screen at any screen size or resolution. ### Enable keyboard shortcuts After checking this option, users can use the following shortcuts: * C: Open the comment panel. * F: Enter full screen. * R: Restart the prototype. After enabling this option, users can use < or > on the keyboard to switch frames when presenting the prototype. If this option is disabled, users can only switch frames by clicking the hotspot or clicking `<` or `>` at the bottom of the screen. ### Show hotspot hints on click Hotspot hints help guide users through a prototype. After enabling this option, when clicking a non-hotspot area (canvas area or areas outside a hotspot), a blue bounding box will appear in the view indicating the interactive sub-layer area of the current top-level frame, which disappears after 1s. ### Show sidebar When there is at least one flow on the current page, you can enable this option to show or hide the left sidebar. When the left sidebar is displayed, the shared link of the prototype will be marked with `&showProtoSidebar=1` . ### Show UI You can choose to show or hide Motiff’s prototype UI in the presentation view. Hiding the UI can help you avoid visual interference when testing the prototype. When this option is enabled, Motiff will: * Hide the top toolbar, bottom toolbar, and left sidebar in the current view. * A **Press ⌘ \\ to show the UI again** prompt appears at the bottom center of the canvas area. * The shared link of the prototype will be updated to `&hideUI=1` . ## Switch frame order When presenting the prototype, you can press → , Space , or N to navigate to the next frame, or press ← to navigate to the previous frame. This setting is enabled by default. ### Prototype with flow starting point * Press ← to switch to the previous frame (disable in the flow starting point). * Press → to switch to the next frame (disabled in the destination). * When a frame has valid connections with multiple top-level frames, Motiff will first switch frames in the order of horizontal before switching to vertical movement, continuing in this sequence until it reaches the intended destination. If there are multiple frames in the same position that meet the conditions, Motiff will switch frames from top to bottom according to the Z-axis layer order. ### Prototype without flow starting point If no top-level frame is selected as the flow starting point before presentation, Motiff will start the with the flow starting point of the first flow. Motiff will sort the frames according to the coordinates in the canvas and switch them in the order of x-axis from left to right and y-axis from top to bottom.