# Using Crypto

# Uploading Static Figma Designs

The "Static Frames" feature in Crypto works by uploading images of your top level parent frames from the current Figma page via the Crypto Figma plugin, and generating 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).

To get started with this feature, please ensure you've selected Figma Designs (Static Frames) from the Crypto plugin toolbar.

# Selecting and deselecting frames to upload

To get started, please ensure you've selected Figma Designs (Static Frames) from the Crypto plugin toolbar.

You'll now be able to select the frames from your current Figma page that you would like to use as the designs to share in your password protected link.

Crypto will load all of your "parent frames" from your current Figma page into the plugin as a list of frames that you can use to choose the designs you should like to share; you can click on any frame's checkbox or image thumbnail to select it (clicking it again will deselect it).

Parent frames required

To upload your static designs, your Figma page must contain at least one "Parent Frame". This means, any "frames" that are located directly underneath your page.

# Highlighting Figma parent frames to select them

To make it easier to select the Figma parent frames that you want to compare, clicking or highlighting any frame(s) on your Figma page will automatically filter them down in the available frames list in the Crypto plugin.

# Refreshing Figma parent frames

If the Crypto plugin is already running and you need to add or remove any parent frames on your current Figma page, you can make those updates as needed and then click on the Refresh icon button in the Crypto plugin toolbar.

# Using quick sort to order your frames

There are a number of different ways to sort the order of your frames for your uploaded designs:

# Sort frames by Figma Layer Order

Selecting the Sort frames by Figma Layer Order option will automatically sort your the order of your frames to match their order in your Figma layers.

# Sort frames visually by Columns

Selecting the Sort frames visually by Columns option will automatically sort your the order of your frames to match their visual positioning order by columns in your Figma design.

# Sort frames visually by Rows

Selecting the Sort frames visually by Rows option will automatically sort your the order of your frames to match their visual positioning order by rows in your Figma design.

# Sort frames visually by Figma Layer Name

Selecting the Sort frames by Figma Layer Name option will automatically sort your the order of your frames to match their alphabetical order according to their Figma layer names.

# Manually ordering frames with drag and drop

You can manually sort the order of your frames using drag and drop, by clicking/holding your mouse on any thumbnail image, and dragging it up or down to shift its order in your uploaded frames, then dropping it to confirm that order. This custom ordering will be saved if you want to switch between ordering options, so you can get it back by clicking the Sort frames by Custom Order option in the sorting select box.

# Uploading your designs

Once you're happy with your frame selection and ordering, you can click the Share Design URL button in the Crypto plugin toolbar. This will open the share overlay, where you can click the Securely Upload Designs button to begin uploading the images.

You will see a confirmation message with your secure URL and a generated password when the upload is complete.

# Opening your generated URL

Once the upload has completed, you'll be able to copy the secure URL and password to view your selected frames from Figma 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.

# Uploading a new version URL

After you've uploaded your designs for the first time, you'll have the option to continue uploading new URLs, which create versions of your designs. This can be a good way to keep track of different stages in a design, or simply to create different URLs that show a different set of frames.

You can create a new version URL using the Crypto plugin by clicking the Share Design URL button in the Crypto plugin toolbar, then clicking the Upload New Version URL button.

You will see a confirmation message with your new secure URL version and the password when the upload is complete.

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.

# Updating a previously uploaded Crypto version URL

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.

This will replace the designs on that previously uploaded URL with the new frames that you've selected in the Crypto plugin. It will not update the URL or password details, so anyone with those details previously will still be able to use them.

You will see a confirmation message with your new secure URL version and the password when the upload is complete.

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.

Updating a URL will replace the previously uploaded designs

Clicking the Update Version xxxxxxxx URL button will replace all the uploaded designs for that selected version. Anyone with the previous URL and password will see the updated designs when they re-visit the URL that was previously sent to them.

# Deleting a Crypto version URL

You can delete any version of the secure URLs you've generated 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 enabling the toggle: I would like to delete the xxxxxxxx version URL; enabling this toggle will allow you to click the Delete Version xxxxxxxx URL button.

You will see a confirmation message letting you know that the selected version was deleted.

Deleting a version URL cannot be undone

Clicking the Delete Version xxxxxxxx URL button will delete all the uploaded designs for that selected version. Anyone with that URL won't be able to view those designs anymore. However, you can always upload a new version and share the new URL with them after deleting the previous URL they were sent.

# Viewing Static Figma Designs

# Logging in to your designs

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.

# Switching between your uploaded design versions

If you have uploaded multiple versions of your designs using the Crypto Figma plugin, you can instantly switch between those versions in the Crypto web app by clicking on the select box heading in the top left of the page. Selecting a different version will load up the designs for that specific version. You'll also be able to see when each version was last updated by looking at the label underneath the selector.

You can navigate between your frames in the Crypto web app by clicking on the arrow icon buttons, clicking/holding and dragging the frames left or right, or by pressing the left arrow or right arrow keys on your keyboard. Pressing the space key on your keyboard will also move to the next frame.

# Jumping between frames in your design

If you need to jump directly to a certain frame in your uploaded designs, you can use the navigation bar at the bottom of the page in the Crypto web app. Hovering over the navigation bar will reveal the thumbnails for each frame, and clicking on any of the thumbnails will instantly jump to viewing that specific frame.

# Toggling dark mode

If your designs work better against a dark background, you can toggle dark mode* by clicking on the sun or moon icon in the Crypto web app toolbar. Clicking the icon will toggle between dark mode and the default (lighter) mode.

# Toggling the outer contents visibility

If you don't want the heading, arrow icons, navigation bar or icon toolbar to be visible while looking at your designs, you can click on the visibility icon button in the Crypto web app toolbar. Clicking on this icon button will toggle the visibility of everything besides the designs themselves.

# Recording your designs to a video file

You can record yourself viewing the designs in the Crypto web app by clicking on the record icon button in the Crypto web app toolbar. This will prompt you to allow the page to access screen sharing and audio. Once you've done this, you'll be able to select the browser tab as the source that you would like to share and record.

To stop the video recording, you can click on the stop button in your browser or click the record icon button again.

Stopping the recording will automatically download your .webm video to your computer's default download folder.

Video will be auto downloaded if the tab is closed

Just in case you accidentally close the tab while the screen is being recorded, the Crypto web app will automatically stop the recording and download the video file, recorded up until the time that the tab was closed.

# Opening and viewing your recorded video file

After the .webm file save been downloaded, you'll be able to upload it to your own website, send it to someone via Slack (or another method) or edit/convert it to another video. The easiest way to open the downloaded video file is to drag the downloaded file into your web browser, and using that to play it back.

# Toggling fullscreen mode for your designs

If you would prefer to view your designs in full screen mode (instead of the windowed browser), you can click on the fullscreen icon button in the Crypto web app toolbar. You can exit fullscreen mode at any time by pressing the esc button on your keyboard, or clicking on the fullscreen icon button again.

# Uploading Figma Prototypes

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

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

# Opening your generated URL

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.

# 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 to your 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.

# Interacting with your prototype

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.

# Recording your prototype to a video file

You can record yourself interacting with the prototype in the Crypto web app by clicking on the Record icon button in the Crypto web app toolbar. This will prompt you to allow the page to access screen sharing and audio. Once you've done this, you'll be able to select the browser tab as the source that you would like to share and record.

To stop the video recording, you can click on the Stop button in your browser.

Stopping the recording will automatically download your .webm video to your computer's default download folder.

Video will be auto downloaded if the tab is closed

Just in case you accidentally close the tab while the screen is being recorded, the Crypto web app will automatically stop the recording and download the video file, recorded up until the time that the tab was closed.

# Opening and viewing your recorded video file

After the .webm file save been downloaded, you'll be able to upload it to your own website, send it to someone via Slack (or another method) or edit/convert it to another video. The easiest way to open the downloaded video file is to drag the downloaded file into your web browser, and using that to play it back.

# Toggling fullscreen mode for your prototype

If you would prefer to view your prototype in full screen mode (instead of the windowed browser), you can press on the F button on your keyboard. You can exit fullscreen mode at any time by pressing the esc button on your keyboard.