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).

The underlying Figma URL will still be public. Due to the way sharing links works in Figma, Crypto can only wrap a public Figma URL Embed inside a password protected URL, this means that anyone with the underlying Figma URL can still view it. 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.

​
Switching to prototype mode

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

Parent level Figma frames required. To upload a Figma prototype, your Figma page must contain at least one “Parent Frame”. This means, any “frames” that are located directly underneath your page.

​
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

The underlying Figma URL will still be public. Due to the way sharing links works in Figma, Crypto can only wrap a public Figma URL Embed inside a password protected URL, this means that anyone with the underlying Figma URL can still view it. 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.

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.

URL and password details can be accessed in the plugin later. If you need to copy these URL and password details again later, you can do this by clicking the Share Design URL button in the Crypto plugin toolbar, then selecting a previously uploaded version using the version select box; this will reveal the URL and password details for the URL that you can copy under the Secure URL Details section.
The underlying Figma URL will still be public. Due to the way sharing links works in Figma, Crypto can only wrap a public Figma URL Embed inside a password protected URL, this means that anyone with the underlying Figma URL can still view it. 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.

​
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.

Static designs and prototype URLs share the same password per Figma page. If you’re uploading static designs and a prototype on the same Figma page, please be mindful that each Figma page only has a single password for both URLs. Changing the password for one will also update the other.
Updating the password will lock out anyone who had the previous password. Updating the password will prevent anyone who may have had the previous password from looking at your URL; if you need them to still have access, please re-share the new password with them.

​
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.

Re-focusing the Figma embed. If you toggle the icon visibility or click on any of the other icons in the Crypto prototype toolbar, you’ll need to click on the main Figma Prototype embed area again to re-focus the prototype, in order to continue using keyboard shortcuts, etc.

Was this page helpful?

Figma DesignsRecord Design/Prototype