Video Tutorial: Password protect 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).

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.

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.

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.

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.

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.

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.

Navigating the frames in your design

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.

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.

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.