Video Tutorial: Password protect static Figma designs
This video tutorial is a complete step-by-step guide showing you how to add password protection to your Figma designs using the Crypto plugin.
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 level Figma 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.
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.