Sharing a Prototype Preview
To share a preview of your prototype, all you need to do is open the Preview and click on the 'Copy link' button to share.
The Prototype preview that the receiver will see works just like your own Preview window, and you control exactly how it will show.
Configuring your shareable Preview
Before you want to share your prototype you may want to make some tweaks as to how you display your prototype. Framer’s Preview has many configurations to make presenting your prototype a great experience.
Devices
Framer’s Preview includes many device frames you can add to your prototype that’s being previewed.
Under the Devices option at the top of the Preview, you can pick between Realistic renders of existing devices or Clay devices.
If you’d rather present without a device frame, select the None option.
Device color
When you pick a Realistic device, you will notice that you are given various colors to pick from depending on which color is available for this device.
If you’ve picked a Clay device, the color is decided by the Theme and is thus restricted to a dark or light clay device.
Hands
For an extra dash of realism, your preview can also include a hand model.
Open the Settings and pick between two different hand models from the Hand property.
Note: Hand models are only possible with Realistic phone-sized Screens. When you currently picked a Clay device instead, choosing a hand in the settings will revert your device to a Realistic device. If you are prototyping for non-phone Screens, you are not able to add a Hand.
Theme
The theme of the Preview, Dark or Light, will automatically adapt to your project’s current dark or light mode.
To change it from within the Preview, open the Settings and toggle the Theme setting.
Background
To really make your prototype your own, you can also change the background you want to display around your prototype.
Open the Settings and click the Background property. This will enable you to choose between either a solid color or uploading an image fill.
Other sharing features
Responsive Design
Check the box next to Responsive Design to enable a fluid layout simulation in the preview.
Touch Cursor
Enable this setting to show a touch cursor in the preview instead of a normal cursor.
Interaction Highlights
Enable this setting to give viewers guided highlights of where they can click in your prototypes.
Hide Framer Interface
Enable this setting to hide the Framer interface in your preview. Perfect for user testing and presentations.
Private Link
Enable this setting to ensure prototypes are only accessible by designated viewers.
Password Protection
Use this setting to put a password on your prototypes.
Sharing your prototype with someone on a mobile device
To view your Prototype view on mobile, click the Mobile icon in the middle top. This will display a QR code that you can scan with your mobile phone’s camera or QR code app.
Learn more about this in our Previewing article and the article on Preview Apps.
Permissions
When you are on a Pro or Enterprise team you can configure who can view your prototype. This can help protect the prototype preview link from being distributed to individuals who shouldn't see the work.
To learn more about turning the prototype preview link private, head over to the Private Link section in the Previewing article.