Skip to content

Presenting and Sharing Prototypes

You've brought your idea to life, now what? This page will discuss methods of sharing your prototype, while still retaining control over who can see your design.

Publishing the Prototype

  1. Click the blue Share button in the top-right corner of the Figma interface.

  2. Set the sharing permissions by choosing the appropriate visibility.

Sharing Options Explained:

When you select Share , you will be asked to choose from one of two options:

  • Anyone who has the URL can access the prototype.
  • No sign-in is required to view the design.
  • This is best for public projects and client presentations.
  • Privacy considerations should be made when using this setting, as owner cannot track who has viewed the prototype.

2. Specific individuals or teams:

  • Only people who have received an invitation can access the design.
  • Requires viewers to have a Figma account, and to have signed-in to their profile.
  • This is a good option for confidential designs and work that is still in progress.
  • The owner of the file will be able to track viewers and manage permissions easily. They can:
    1. set specific view-only or edit permissions.
    2. revoke access for a user at any time.
    3. disable the option to download or copy the file.

Click Share -> Copy Link to obtain the URL for sharing your prototype.

Presenting the Prototype

  1. Open the prototype link in your browser by pasting the copied link.
  2. Enter Presentation Mode by clicking on the play icon. This will display your design in full screen, without distractions.

Present Prototype Example

Presentation Options Explained:

Preview Button:

Displays the prototype directly within the editor, allowing you to test functionality and make adjustments without switching tabs. Ideal for quick iterations during development.

Present Button:

Opens the prototype in a separate tab for full-screen viewing. Useful for sharing with others, testing on different devices, or showcasing the design in a presentation setting. Allows navigatation through frames and interactions, which is useful to demonstrate user flow.

Adjust Prototype Settings

  1. Select a Device and Model.
  2. Preview your prototype.
  3. Select Background color.
  4. Set the prototype's Starting Frame.
⚠️ Tip: For an even more efficient workflow, you can quickly toggle between the Design and Prototype tabs using the keyboard shortcut Shift + E.

Grid Example

Something wrong?

If your protoype isn't looking quite right, why not visit our troubleshooting page to view resolutions to most common issues!

✅ And that's it! You should now have a solid understanding of how to prepare Figma files, as well as how to create frames and set up grids. You're ready to start designing with confidence!