Hypermatic Docs

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

Duplicating a Figma file will carry over the URL and password

If you duplicate your Figma file, the URL and password plugin data will also be carried across to the new file. If you need to duplicate your file and need a different URL/password for it than the original Figma file, you can do this by typing the Komami code (Up, Up, Down, Down, Left, Right, Left, Right, B, A) while the plugin window is open. This will generate a brand new Crypto URL/password for your new duplicated Figma file. Please note, this will not delete the previous URL.

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

# 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 (a minimum 6 characters is required) 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 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 (opens new window), 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

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

# 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 (opens new window), 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 (opens new window), 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 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 (opens new window).

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

# Exporting a Password Protected PDF

Along with uploading your static designs or prototype to a password protected URL, you can also export your Figma frames to a compressed, password protected (optional) PDF file that you can download to your computer. This option doesn't upload anything online, and allows you to send the exported file securely via email or any other method.

To get started with this feature, please ensure you've selected Password Protected PDF File from the Crypto plugin toolbar.

PDF Export Browser Support

Due to browser compatibility issues, the Password Protected PDF File feature in Crypto isn't supported in Safari. Please run the plugin in another browser (like Chrome (opens new window)) or the Figma Desktop App (opens new window) instead.

# Setting PDF export options

Once you're happy with your frame selection and ordering, you can click the Export PDF File button in the Crypto plugin toolbar. This will open the PDF export options overlay where you can specify your password and other settings.

There are a few options you can specify when exporting merged PDF files. These are related to the compression/quality level, password protection and the color profile of your exported PDF.

# Choosing PDF quality

You can set the quality level for your PDF export as 72dpi, 150dpi or 300dpi by using the select input to specify your desired quality level. The higher the dpi, the better the quality, but also higher the file size.

# Setting a password for your merged PDF

If you would like your exported merged PDF file to require a password before it can be opened, you can enable the Password Protect PDF setting, then set your own password in the password input field. Ensure that you give this password to anyone you're sending the exported merged PDF file to, or they won't be able to open the file to view its contents.

# Gradient fills in PDF exports

If you're exporting layers to PDF that contain gradient fills inside any vector paths, you can enable the Vector Path Gradients setting to ensure the gradient is rendered as expected. If you don't need this option, there's no need to enable it.

# Exporting and saving the merged PDF

Once you're happy with your PDF settings and frame selection/order, you can click the Export PDF button; this will begin the process of merging and compressing your PDF pages one by one. You'll see a progress indicator showing you that the PDF is being merged and compressed.

After all of the frames in your PDF have been merged and compressed, you'll see a confirmation notification letting you know that your PDF has been merged, and your .pdf file is ready. You can download it to your computer by clicking the Download PDF button.

If you've specified a password, you'll also be able to copy it to your clipboard by clicking on the Copy icon button next to the password field.

File downloads from Figma

If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

# Opening your password protected PDF file

If your you enabled the Password Protect PDF setting for your PDF export, you can open your saved PDF file by double clicking on the exported .pdf file on your computer, and pasting the password from the Crypto plugin (which you specified in the settings); this will allow you to view the PDF document in your PDF viewer application.

← Troubleshooting Crypto →