Preview Window

The Preview window displays your project as an interactive prototype.

To open and close the Preview window, click on the Preview button at the top-right side of the Toolbar, or press ⌘ + P for Mac or Ctrl + P for Windows.

Previewing a Layer

By default, the Preview will open your project's Home Frame. To Preview a specific layer, select that layer on the canvas.

Locking

To keep the Preview focused on a certain layer, click the lock in the menu bar. When the Preview is locked, selecting a layer will not change the Preview's focus.

Resetting

To refresh the Preview, open the Preview menu and click Reset Preview. You can also reset the Preview by pressing ⌘ + R for Mac or Ctrl + R for Windows.

When the Preview resets, it will return to where it began: either the locked layer, selected layer, or the Home Frame.

Responsive Mode

When in Responsive Mode, the Preview will resize the current layer to the size of the Preview window.

To enter or exit Responsive Mode, open the Preview menu and click Responsive.

Tip: To make the most of Responsive Mode, be sure to configure the Constraints for the selected layer's children.

Touch Cursor

For mobile prototypes, you can set the Preview to use a round touch cursor instead of the standard cursor.

To toggle the touch cursor on and off, open the Preview menu and click Touch Cursor.

Local Preview

To pop your preview out of your project's Framer window, open the Preview menu and click Open in New Tab. This window will stay in sync with your project and work just like your project's regular preview window.

Console

The Preview's Console displays a log of messages from your prototype.

To open and close the Console, select the > icon in the Preview’s top menu bar. Note that this icon will only be visible if Framer’s code features are enabled.

To expand and collapse the Console, click the arrow beside the Console's header.