Uploading password protected Figma Prototypes

Video Tutorial: Password protect Figma prototype embeds

The "Live Embed" feature in Crypto works by putting your public Figma prototype embed behind a secure URL and password that you can share with others, where they can view your designs via the Crypto web app (without them requiring a Figma account).

Switching to prototype mode ​

To get started with this feature, please ensure you've selected Figma Prototype (Live Embed) from the Crypto plugin toolbar.

Copying your Figma URL to use ​

Setting your prototype options ​

You can select a few different configuration options when creating password protected links for your Figma Prototypes:

Scale Options ​

This dropdown selector will allow you to choose how your prototype is scaled in the browser, based on the following options:

  • 100% - Display at full size
  • Fit - Scale down to fit
  • Fill - Scale up or down to fill
  • Scale down to fit width (Default)

Hotspots ​

Enabling the Hotspots toggle will ensure that the prototype reveals clickable hotspots in your designs when a user clicks around the screen; keeping this turned off will ensure that not clickable hotspot hints are shown.

Enabling the Side toggle will ensure that the sidebar navigation panel for your Figma prototype is shown in the browser; keeping this turned off will ensure this isn't shown to the user.

Creating your password protected prototype URL ​

To create your password protected Prototype link, click the Share Prototype URL, then click the Create Prototype URL button.

Once the upload has completed, you'll be able to copy the secure URL and password to view your Figma prototype embed in the browser, using the Crypto web app.

Updating the prototype URL settings ​

There are times when you will want to update a previous version Crypto URL that you've uploaded and sent to someone; you can update any previously uploaded URL using the Crypto plugin by clicking the Share Design URL button in the Crypto plugin toolbar, then selecting a previously uploaded version using the version select box and clicking the Update Version xxxxxxxx URL button.

Changing your Crypto URL password ​

By default, the Crypto plugin generates a secure random password for you, but if you would like to change this to a custom password of your own, you can do this by enabling the Change Password toggle under the Set Password for Crypto URLs section of the upload settings panel, then entering your new password in the input field and clicking the Set Password button, which will update the password for your Crypto URL for this Figma page.

Deleting the prototype URL ​

You can delete the password protected URL via the Crypto plugin and/or change the permissions of the Figma file to only people invited to this file to revoke access, if needed.

Viewing Figma Prototypes ​

Logging in and interacting with your password protected Figma prototype ​

After opening your URL (from the Crypto Figma plugin) in your web browser, you'll be able to paste in the generated password (from the Crypto Figma plugin). After pasting your password for the URL, clicking the Login button will authenticate you to view the uploaded designs.

Due to the Crypto web app embedding the native Figma prototype embed, interacting with your prototype works exactly the same way as it normally would by viewing it in Figma. For a more in-depth overview of this, please visit the official Figma help article to Preview designs and prototypes in Presentation View.

Using Figma prototype keyboard shortcuts ​

Due to the Crypto web app embedding the native Figma prototype embed, the shortcuts for the Figma prototype are exactly the same as they are when viewing the prototype in Figma. To see these keyboard shortcuts while using the Crypto web app, you can hover your mouse over the Keyboard icon in the toolbar.

Available keyboard shortcuts while viewing the prototype ​

  • Change View Size (Z)
  • Toggle Fullscreen (F)
  • Restart Prototype (R)
  • Previous Screen (←)
  • Next Screen (→)
  • Advance Prototype (Enter)

Toggling the toolbar icons visibility ​

If you don't want the Crypto web app icon toolbar to be visible while looking at your prototype, you can click on the Visibility icon button in the Crypto web app toolbar. Clicking on this icon button will toggle the visibility of the icons. You can hover back over the Visibility icon button to reveal and and click it again to toggle the toolbar back to being visible.