Prototypes are a fantastic way to iterate on ideas, test out different concepts, preview interactions, or present your designs to key stakeholders.
In this article we'll take you through the process of viewing, sharing and collecting feedback on your Prototypes.
- Viewing Prototypes.
- Using Scale Modes.
- Presentation View Settings.
- Sharing Prototypes.
- Using Observation Mode.
- Commenting on Prototypes.
Tip! You can customize the Device, Orientation, Background Color and Starting Frame of your Prototypes. Learn more in our Prototype Settings article.
1 | Viewing Prototypes
When you're ready to take your Prototype for a spin, you can use the Present button. This is the play icon in the top-right corner of the screen.
This will open the current File in a new tab, in Presentation View.
Presentation View allows you to view a simulation of your Prototype, that you and other viewers can interact with:
- Click on Hotspots within the Prototype.
- Use the Arrows underneath the Prototype to navigate between Frames.
- Click the Restart button in the bottom-right corner, or use the [R]keyboard shortcut, to return to the Starting Frame.
Your Prototype will include any Frames that have Connections. Any Frames without connections will be excluded from the Prototype.
If you have no Prototyping Connections added to any of your Frames, then you will be able to use Presentation View to navigate through all of the Frames in the File.
Tip! You can use Presentation View, without any Connections, to present a deck of slides to an audience. Use the on-screen arrows, the left and right keys on your keyboard, or the enter/return key to navigate between slides.
2 | Using Scale Modes
Every viewer who is interacting with a Prototype will be able to set a Scale mode that suits them. This will only apply to their view of the Prototype.
You can adjust the Scale mode from the menu bar. This will be set to Fitby default.
You can choose from three options:
- 100% - Display at full size displays the Prototype at the full size of the underlying Frames in the Prototype. Depending on the Frame sizes, this may result in the Prototype being cropped on smaller displays.
- Fit - Scale down to fit will shrink the Prototype so that it fits entirely within the viewer's screen dimensions. This is the default option.
- Fill - Scale or up or down to fill will make sure that the Prototype fills the display, on any screen size or resolution. Unlike the Fit option, Fill allows the Prototype to also be scaled up to fill larger screens.
Tip! You can set the default Scale mode to another setting by adding the Scale mode variable to the end of the Prototype's URL.
- 100% - &scaling=min-zoom
- Fit - &scaling=scale-down
- Fill - &scaling=contain
Full Screen Mode
To make the Prototyping process more immersive, you can enter Full Screen mode in the top-right corner:
This will also hide the Presentation View UI, so that viewers aren't distracted by the additional settings, which is perfect for testing a Prototype with end users!
3 | Presentation View Settings
If you are the File owner, you will have a couple of additional view settings available.
You can find these settings under the View settings, the Eye icon in the menu:
Tip! To display the Presentation View UI, click on the screen, or hover at the top of the screen.
Show Resolved Comments
As long as you are logged in to your Figma account, you will be able to make comments on a Prototype. You will be able to respond and resolve comments.
You can decide if you would like to show Resolved comments on the Prototype. This will display any resolved comments, alongside any new or unresolved comments.
1. Click on the View icon in the menu bar.
2. Select Show Resolved Comments. A tick will appear next to the setting when this is enabled.
3. To hide any Resolved Comments, select the setting again to disable.
Note: If there are no comments on the Prototype, then this setting will be greyed out and can't be updated.
Learn more about comments in the Commenting on Prototypes section below.
Show Hotspot Hints
Hotspot Hints give the user clues as to where the Hotspots are located in the Prototype.
When these are enabled, a blue box will appear around each Hotspot, when the user clicks on any area outside of a Hotspot.
- Click on the View icon (the eye) in the menu bar.
- Select Show Hotspot Hints on Click to apply. A tick will appear next to the setting when this is enabled.
- To hide the Hints, select the setting again to disable.
4 | Sharing Prototypes
When you're ready to present or share your Prototypes with others, you can use the Share Prototype button in the menu bar:
This will give you a number of sharing options:
Anyone who has been given access to the file itself will be able to view both the file and the Prototype, by default.
You can click on the Copy link option to copy the link that takes you directly to the Prototype. This will allow anyone with that link to view or interact with the Prototype.
You can update the Anyone with the link settings to Can view, Can Edit, or Remove Link Access, as desired.
This will update the permissions for anyone involved in the project, as well as anyone you share the Prototype link with.
You can also choose to embed the Prototype directly in another website or platform.
- Click the Public Embed option.
- A window will pop up that includes the embed code.
- Click Copy to add the code to your clipboard.
- You can then add the code to your website, or a platform that supports custom html.
Tip! When you're finished, click outside of the Share Prototype window to return to the Prototype.
Viewing Prototypes on Mobile Devices
You can also open any Prototyping link on any mobile device that's connected to the internet.
This will automatically display the Prototype so that it takes up the entire display, within the browser window.
You will only be able to interact with the Prototype using the Hotspot connections. The arrow keys, or using the back and forwards action on the browser, won't be supported when viewing Prototypes on Mobile devices.
Depending on the device, this may not include any of the additional Prototyping Settings (like the simulated device, or the background color).
Tip! You can also view Prototypes using the Figma Mirror app. This allows you to view the Prototype in a more realistic and immersive environment, without the limitations of the browser.
Some Prototyping interactions won't be supported in the Figma Mirror app (including Horizontal and Vertical Overflow Behaviors).
Learn more about downloading and using the Mirror App.
5 | Using Observation Mode
Observation mode allows you to view what other Prototype users are seeing from their end.
This is handy for presentations where you are switching between presenters, or for watching how users interact with a Prototype during testing.
When you have multiple users viewing a Prototype, they will appear in the menu bar along the top of the screen.
You can then click on the user's image to enter Observation Mode and view what the user is experiencing.
Tip! If someone is signed in, this will show their profile picture and display name. If they aren't signed in, this will show a colored '?' for an Anonymous user.
6 | Commenting on Prototypes
Users will need to be signed into their Figma account to be able to make comments on Prototypes.
- Navigate to the Frame you'd like to comment on.
- Click on the Comment icon in the top-left corner of the screen. The cursor will be replaced with an orange comment bubble.
- Click on the relevant part of the Prototype to place your comment.
- Type your comment in the field provided and click Post when you're ready.
- To exit commenting mode, click the Esc key on your keyboard.
Reply and Resolving Comments
When you view a comment, you'll be prompted to join in on the conversation. Enter your response in the field provided, and click Replyto post:
When you've reached an agreement, or have resolved an issue, you can click Resolve in the top-right corner to mark the comment as resolved:
The comment will then be removed from the Prototype.
Note: If you are the owner of the file, then you can choose whether or not comments will be displayed once they are resolved. Check out 3 | Presentation View Settings (above), for more information.