Previewing your Site
You can preview your website and all of your interactions without publishing by using the Preview function.
Previewing Pages
You can access the preview by either clicking on the play button on the top left of each page or by pressing Command + P on macOS, and CTRL + P on Windows. To exit the preview, click on the close button or press ESC. Within the preview, you can resize the viewport to preview the responsiveness of your web page and breakpoints.
You can select the preview icon from any selection on your page to preview either that page or breakpoint. This means that if you quickly want to check the Tablet breakpoint, you can select it on the Canvas, then hit the preview icon, and it will open the preview at the matching breakpoint width automatically.
Please note that any Custom Code added through the Settings will not be visible in your preview. These changes will only be reflected on the published website.
Preview Modes
You have two modes in the preview, “Responsive” and “Scale to Fit”. You can toggle between these two modes using the segmented control on the top left.
In the “Responsive” mode, you can drag the handles to preview different breakpoints, and hide the UI to preview it as the full width and height of the viewport.
In the “Scale to Fit” mode, you can view the currently selected frame in the original dimensions in which it has been designed in. This is particularly useful for previewing components and checking the full composition of each webpage.