How to password protect Figma prototypes using Crypto

Video Transcript

Today, I’m going to be showing you how to generate password protected embeds for your Figma prototypes using the Crypto Figma plugin.

To do that, we first need to install the Figma plugin by going up to the top left hand corner, clicking on the Figma icon, and heading over to the Community. In the search bar, if you type the keyword “Crypto”, and under the “Plugins” tab you’ll see “Crypto Password Protection” come up; and all you need to do is click on the “Install” button on the right hand side and you’ll be ready to go.

Once you’ve done that, you can jump back into your Figma project. Mine already has some prototyping links; if yours doesn’t have prototyping links, you might want to go ahead and do that first and create some prototyping in your design.

Then we can go ahead and open up the Crypto Figma plugin we just installed; if you right-click anywhere, go down to “Plugins” and then go down to “Crypto Password Protection”, if you click on that it will load up the Figma plugin that we just installed a moment ago. You can see up here we’ve got a little drop down box which is currently set to “Figma Prototype”; if you open up this Figma plugin for the very first time it might default to “Figma Designs” as the option; this option allows you to upload static frames or static designs to the Crypto web app (which I covered in another Figma tutorial), but today I’m going to be focusing on the other option, which is for password protecting Figma prototype embeds.

If you click on the select box and click on “Figma Prototype (Live Embed)”, that option will switch the Figma plugin to show you all of the frames that have prototype interactions on them and gives you a bit of an idea of what’s going to be uploaded to the password protected URL. The first thing we need to do is click on the “Share Prototype URL” button, and that’s going to bring up some settings down here.

The first thing you’ll need to do here is get this URL for your project and by default this URL is empty, so there’s there’s nothing in there when you open up this file for the first time. You can see here it’s got some instructions on how to get that URL, so all we need to do is click on the “Share” button in the Figma toolbar up on the right hand side here, this little blue “Share” button; if you click on that, that will bring up this little pop-up modal. What you need to do is change this little setting where it says “Only people invited to this file” to “Anyone with the link”; if you click on “Anyone with the link”, that will change it to show that anyone with the link to the Figma file can view it.

Then we want to click on “Copy link”; there’s this little icon down here, “Copy link” and that will copy the link to the clipboard, which we can then paste into our Crypto Figma plugin. I’ve just clicked that, copied the link, and now I’m going back into the Figma plugin settings and pasting it; you can see here I’ve just pasted the Figma file URL. This file URL links to the project that we’re currently in and the page that we’re currently on, I’ve just pasted that in there and now we’ve got a couple of options down here.

These settings will set the Figma prototype options, so we can change the scaling of the prototype; we can do “100% Full Size”, “Fit”, “Fill” and “Scale Down”. I’m just going to use “Scale Down”, and you’ll see we’ll be able to change this in the prototype later anyway, but this is just setting the default. The other option that we have is to “Show the hotspot hints on click”; if you turn this off or disable it, it won’t show any of the hints if a user clicks their mouse on any of the screens in your Figma prototype, so I’m just going to leave that turned on, because I do want to show hotspot hints when someone clicks on the designs.

The last thing we need to do is click on this button, but it’s just giving us a little warning letting us know that clicking the button is going to embed our live Figma prototype on a password protected URL, however the embed behind this link is technically still viewable by anyone who happens to have that link, so if you’ve shared that link with someone and you’ve set it to “Anyone can view”, they will be able to view that link. but if you’re sharing the Crypto URL that’s going to be generated, then they’ll require a password to view that URL. It’s just a bit of a flag, and if you need more help with this we have a documentation link here which will go into a bit more detail about what this means.

Now that we’re done we can click on the “Create Prototype URL” button; I’m just going to click on that, and this is now generating a secure prototype URL for us which we’re going to get now. We’ve got this confirmation screen telling us that the secure link is ready, and we can copy this secure prototype URL and the password that it generated for us. I’m just going to copy the password first; so if I copy that, that will copy the password to my clipboard and then I can go ahead and click on the secure URL and open up my browser.

Now that the page is loaded, I can go down to the password field and paste in the password that I just copied from the Figma plugin and click “Login”. Once this loads, we’ll see our Figma prototype embed show up behind this password protected link. You can see here I’ve got my Figma prototype, and because we enabled the hotspots option, if I click somewhere I can actually see that show up and navigate through my design. We’ve got all our interactions showing up as you’d expect and it’s looking really good.

As I mentioned before, there’s a way to change the zoom setting, so if you hover up on this little keyboard icon up here it will reveal the Figma embed shortcuts for viewing the Figma prototype. We’ve got “change size”, so you can use the “Z” key on your keyboard to change the scale, so if I click on the “Z” key you can see that the zoom is going to change based on whatever I set that to. That’s that’s how that works, and the other shortcuts we have are resetting the Figma prototype, so I can push the “R” key to reset the Figma prototype if I want to bring that back to the start, and then I can navigate between screens by using the “Left” and “Right” keys as well. If I just want to use keyboard navigation to jump through screens I can do that, too.

That’s how that works there, and the last thing we can do is toggle full screen, so if we push the “F” key, that’s going to bring us into full screen and we can use the Figma prototype in full screen mode; and then clicking the “Esc” key on your keyboard, we’ll scale that back down to the windowed view.

Finally, if you want to get rid of this little toolbar, you can click on the little “hide” icon in the top right, and that will remove that toolbar entirely. You can get that back just by going back up to the right hand corner and clicking on that little “Eye” button just like that, so that’s how that works.

We’ve got our Figma prototype in this little embed window and that’s all well and good, but if we want to delete that URL now there’s a couple of ways we can do that. If we jump back into Figma and exit the Crypto Figma plugin, and then let’s just re-run the Crypto Figma plugin; I can just go to “Plugins”, go back down to “Crypto” and open that back up if we re-run the Figma plugin, and then click on the “Share Prototype URL” button again, you can see here that it has now remembered our URL and our password that we just uploaded; if you want to grab those details again without re-uploading the whole Figma prototype link, you can just jump back in here and copy those to clipboard and share them with anyone who you want to be using that URL.

If you no longer want that URL, you can click on this little toggle here and that just is going to tell the Figma plugin that you’d like to go about deleting that prototype URL, and again it’s just flagging this little message to let you know that while it will delete the product the prototype password protected URL on the Crypto domain, it’s not going to affect the Figma file itself; because we already clicked “Share” and changed this setting over here to say that “anyone with the Figma link” can use the file, if we want to remove that functionality in Figma itself we can actually change that to “only people invited to this file”, and if I click on that and then jump back to my web page, you can see here that it’s telling us that the Figma prototype is not found; it’s saying that if the file doesn’t exist or we don’t have permission to view it, and that’s because we just changed this little setting in Figma back to saying that only people invited to this file can view it. Again, that’s just a reminder to say that this this URL here is password protected, but it’s password protecting the embed that’s sitting behind it from Figma; as long as this is not set to “anyone with the link” and it’s set to “only people invited to the file”, then you know no one’s going to be able to actually look at that link. That’s one way of removing access, but we can also just completely remove that link entirely, and I can do that by clicking on the “Delete Prototype URL” in the Figma plugin, so I’ll do that now, it’s deleting the URL and now the URL has been successfully deleted.

If I jump back into the browser, I’m just going to refresh the page, and you can see here it’s telling us that that design actually wasn’t found, and the URL might be wrong or it’s been deleted by the owner; we know that we’ve just deleted it, which means that anyone who had that URL and password before will no longer be able to look at that link and will no longer be able to look at your Figma prototype.

That’s really all you need to know for creating and deleting a password protected URL for Figma prototype embeds; and again I would urge you to read through the documentation if you’re unsure of anything; you’ll be able to get to it just by clicking on the link in the upload screen over here, and that should clarify any questions you might have around Figma permissions, and it’s just a bit of an overview of how that actually works behind the scenes.

I hope that’s been helpful if you’ve been wondering how to password protect your Figma prototype URLs, and you can do it using the Crypto Password Protection Figma plugin right now; so feel free to install it in Figma to give it a try and see if it works for your workflow and your team. Until next time, thank you as always for watching, and we’ll be back very soon with more Figma tutorials just like this one.