Preview

Last updated 2 months ago

Framer X has a Preview window which allows you to see an accurate and live representation of anything that you are creating. And it does so interactively! Just hop into Preview mode by tapping the Play icon in the top right corner or hit +P to see it in action.

Devices

When you create a Frame you can choose from a wide selection of preset devices, which is located in your properties panel under Device. Once a Device is selected, your Frame will automatically resize to the desired device its dimensions. The Preview window will then also automatically adjust itself and will, when in presentation mode, show your designs on the selected device for a perfect representation.

Selection

In Framer X we have improved our Preview window so that it will follow the selection on your Canvas. You will no longer need to go through the complete flow of your design to see the last tweak: Just select the last Frame and the Preview will showcase that screen.

Options

Toggle Cursor

By default the cursor is turned off while using your prototype in Preview mode. You can quickly turn this on by selecting Toggle Cursor. This will then turn on the touch indicator.

Toggle Cursor comes in great when you are making a screen capture of your prototype.

Toggle Hand

To get an accurate feeling of how your prototype would look in the hands of someone else, you can switch on the Toggle Hand feature and simulate it perfectly!

Rotate Device

Previewing a design and want to quickly switch from landscape to portrait-view? Select Rotate Device and your device (and design) will be altered accordingly.

Keep On Top

Select Keep On Top if you want to cement the preview window stuck in the top corner of your window. This will let you continue with your design while always having the preview in sight (You can kind of compare this to Safari its Picture-in-Picture mode).

Presentation

When your prototype is finished and you are ready to show it to the world then go ahead and jump into Presentation mode by pressing +Shift+F . Your prototype will then take full center and you will not be distracted by the rest of the UI. Perfect for testing it out.

Mobile and Remote Previewing

View and interact with your native projects in context with our preview apps for iOS and Android. Via Live Preview, you can get the same preview behavior remotely on any phone or other device anywhere in the world.

Learn more about Live Preview