Framer X includes a standalone Preview window that allows you to see an accurate live representation of anything that you create on the canvas.
Open the preview window by clicking on the play icon in the top right on the toolbar, or by hitting
while you have a frame selected. The preview window in Framer X always mirrors your current selection, which means you can quickly skip to different parts of your design by simply selecting different frames.
The left-most icon in the Preview window menubar allows you to trigger the custom console. Here you can log values and see errors and warnings. Clicking on the trashcan icon will clear the console, while clicking on the close icon will hide it entirely.
Clicking on the lock icon in the menubar will lock your current selection on the Canvas. This is especially useful when editing code components, as it allows you to switch between the Canvas and Code tabs without affecting what you see in Preview.
When you create a Frame, you can choose from a wide selection of preset options in the Device section of the properties panel. Once a device is selected, your Frame will automatically resize to the correct dimensions. The Preview window will also automatically adjust to these dimensions and show your designs on the device you selected.
The cursor is turned off by default while using your prototype in Preview mode. You can quickly turn the cursor back on by selecting Toggle Cursor, which will turn on the touch indicator. To do this, click on the menu icon in the top-right of the Preview window menubar and select "Toggle Cursor" or hit
CMD + Shift + C.
To get an accurate depiction of how your prototype would look in the hands of a user, switch on the Toggle Hand feature. Enable this by clicking on the menu icon in the top-right of the menubar and selecting "Toggle Hand" or hit
CMD + Shift + H.
It’s also possible to quickly switch between a portrait and landscape view when previewing a design. To do this, click on the menubar and toggle between Potrait and Landscape orientation.
Keep On Top
Select Keep On Top if you want to bring the Preview window in front of your canvas and keep it there. This will let you continue with your design while always having the preview in sight.