Previewing
The Preview window displays your project as an interactive prototype and enables you to easily share a preview of your project.
This article explains the different ways in which you can use the Preview to get an interactive preview of your work.
Head over to our article on sharing a prototype preview to instead learn how to share your prototype preview.
Previewing a Layer
To open the Preview, select the Screen you want to preview and click the blue Play button to the top left corner of the Screen on the canvas.
Alternatively, press ⌘ + P for Mac or Ctrl + P for Windows, or click the Preview button at the top-right side of the Toolbar.
Note: When no layer is selected while opening the Preview, it will open your project’s Home Frame.
Selecting a different layer
To Preview a different layer from the Preview window, choose the layer you want from the top-left dropdown.
Tip: Use the same dropdown to not just preview Screens, but also Components created with code.
Refreshing
To refresh the Preview, click the refresh button to the top-right of the Preview interface, or press ⌘ + R for Mac or Ctrl + R for Windows.
When the Preview refreshes, it will return to where the Preview began. This is for instance useful if you are navigating between many Screens and you want to run through the entire flow once more.
Alternative ways to preview
There are several alternative ways to preview your prototype, such as:
- In a separate new tab
- Fullscreen
- Responsively
- On a mobile device
Previewing in a new tab
When previewing in a separate tab, any changes you make on the canvas will be updated in the Preview live.
This allows you to work side-by-side with both a Preview enabled and giving you the freedom to work on the canvas while observing any changes you make
Previewing fullscreen
If you are previewing fullscreen, any distractions are taken away, allowing you to preview your prototype and only your prototype.
To get out of the fullscreen preview, hit esc on your keyboard.
Responsive previewing
When Responsive Design is enabled, the Preview will resize the current Screen to the size of the Preview window.
To enable or disable Responsive Design, open the Settings to the middle-top of the Preview and click toggle Responsive Design.
Tip: Having a functional responsive prototype relies on the prototype to be configured and designed with responsiveness in mind, or you will notice that elements may move all over your design.
Head over to our article on responsive designs to learn more
Previewing on a mobile device
To quickly open a preview on your mobile devices, such as phones or tablets, click the Mobile button at the top of the Preview.
You will now be given a QR code. When you scan the QR code on your mobile device, you should be given the option to open the link behind it.
Learn more about previewing from a mobile device
Configuring other preview settings
Touch Cursor
For certain prototypes, you may want to set a Touch Cursor to add a touch of realism to your work. This is especially useful if you are previewing mobile prototypes on desktop machines, and don’t want to have a standard cursor.
Enabling the Touch Cursor can easily be done by opening the Settings and toggling Touch Cursor.
Interaction Highlights
Interaction highlights can be enabled to give visual cues to those that interact with your prototype.
These visual cues display as brief blue outlines around any element that has an Interaction attached to it, indicating that tapping or hovering it will cause something to change in the prototype.
Toggling Interaction Highlights is possible by opening the Settings.
Linking to Fullscreen
When you are sharing your prototype preview, you may want the viewer to only see your prototype in full screen. This is useful especially when user-testing, where you want to provide an experience as realistic as possible.
To enable your prototype opening in fullscreen by default, simply open the Settings from the top and tick the box for Link to Fullscreen.
Find out more about sharing your prototype preview
Private Link
If your project is in a Pro or Enterprise team, you can also set the link to a Private Link.
By enabling the link to be private, anyone who receives the link to your prototype will only be able to view it if they are either:
- Invited to the project as a viewer or editor
- Invited to the entire team in any role
Private Links thus prevent users who are not explicitly granted access from viewing your prototype.
Enterprise teams can configure global team permissions to control all Prototype view links for all existing and future projects within their team.
Learn more about global permissions
Console
The Preview's Console displays a log of messages from your prototype, useful when you have leveraged code in your project.
Enabling the Console can be done from the top-left Menu button, or with cmd + I for Mac and ctrl + I for Windows.
To resize the Console, hover over the top edge and drag the console up or down.
Note: The Console can only be enabled if Framer’s code features are enabled.