How to record your Figma prototype to a video file using Crypto

Video Transcript

Today, I’m going to be showing you how to record video files of your Figma prototype interactions using the Crypto Figma plugin.

The first thing you need to do is jump into the Figma “Community” page by going to the top left corner of Figma, clicking on the Figma icon, and just searching for the word “crypto” under the community “Plugins” search and you’ll see “Crypto Password Protection” pop up as a result. If you haven’t already done so, you can just click on the “Install” button on the right hand side, and then you’ll be ready to go. Once you’ve done that you can jump back into your project.

If you if you haven’t already used the Crypto Figma plugin before, you can use it by right-clicking anywhere, going down to “Plugins”, and then clicking on “Crypto Password Protection”, and that will open up the Figma plugin that we just installed. I’ve made a separate Figma tutorial video showing you how to upload, manage and delete your prototyping URL, so I’m not going to cover that in this Figma tutorial, I’m just going to be showing you how to record a video of the Figma prototype itself. Because I’ve already used the Crypto Figma plugin before in this file, I’ve already got the “Figma Prototype (Live Embed)” option selected I can click on “Share Prototype URL”, and I’ve already got a URL set up.

As I said, if you need to figure out how to do this, we do have another Figma tutorial on this exact step which will show you how to get that URL and create this secure password for your Figma prototype, but because I’ve already generated this I’m just going to click on the “copy password” button; this will copy the password for my URL to the clipboard and then I can just click on the secure URL to open that up in a web browser, so I’ll do that now.

I’m just going to paste my password into the password text field and then click on “Login”, and this is going to load up the Figma prototype embed that I’ve already set up using the Crypto Figma plugin. Now our Figma prototype is loaded up in the browser under the Figmatic domain, and we can see here that the Figma prototype is working as we’d expect; we can interact with it and do everything that we had linked up in our Figma design.

To take a recording of this for playing back later, we can just go up to the right hand side and you’ll see up in the toolbar there’s a little video camera icon; if you click on that video camera icon you’ll get a prompt from your web browser to give permission to capture the contents of your screen. Typically what you would do is go over to the “Tab” option, you could technically record the whole screen, but in this case we just want to record the Figma prototype itself, so I’m going to go over to the Chrome tab, click on “Design Prototype”, which is the Crypto URL and I’m just going to click “Share” and that has now given permission for the browser to record this this window. You can see up here it’s got a little red recording icon that’s telling you that it has permission to record the screen, and it is currently recording the screen now.

We’ve got a little “Stop” button here, which we can click when we want to stop it, but as of now it’s recording the screen; everything that I’m doing right now and interacting with, including the audio, it’s capturing the audio as well, in case I’m narrating what I’m doing, or if I’m a confused during a user testing session or something like that, the audio can be handy. It’s basically recording all my interactions right now, and whenever I’m finished I can just go ahead and click on the “Stop” button up here. If I click “Stop”, you can see here it has automatically downloaded a video file in my browser and that video file contains all the interactions we were just doing on the page.]

I can go ahead and open that up. The quickest way to preview that video file is just to drag and drop the file into the browser window itself, so I’m just going to do that now; I’m going to drag it into the toolbar or the URL bar in Chrome and I’m just going to hit “Enter”. That has loaded up the Figma prototype video file, and if I just click on the “Play” button, you can see here my mouse is independent of the mouse in the video; we’ve got this mouse this cursor kind of rolling around in the video there, that was me interacting with the screen while I was recording, and you can see now it’s playing back the recording of me running through my Figma prototype on the web page. You can see my mouse here, and you can see the mouse in the video, so that’s just playing back the video recording that we just took a moment ago; and you can re-watch that based on a user testing session or if you just want to record a Figma prototype to share with your team or share a video file over Slack, this is the way that you can do it.

You can see there, it has just finished the playback; it was just a 45 second recording and that’s that’s all yours now. You’ve got the video file that’s automatically downloaded, and you can go ahead and convert that to a different format if you want.

At the moment, it’s saved as a WebM file, and WebM is a video format that allows you to view video files on the web; it’s a web specific format but if you needed to convert it to a different file type you can use some software video conversion software; if you just google “WebM to MP4” or “WebM to” whatever other video format you need, you’ll be able to find that pretty easily; so that that’s something that you can do if you do need a different format.

The other thing to note is that while you’re recording the page; if we go back to our Figma prototype embed, if you are recording the video and you forget to click the “Stop” button or you accidentally close the tab, it will automatically save the video file for you; it’s just a little bit of a check, so if I click on the video share my tab and click “Share”, if I actually forget to click “Stop” and accidentally close that page, it will still download the video file for me, so you don’t have to worry about losing that; it will automatically save it for you in case you forgot to stop the video for whatever reason.

That’s all I have for you today; it’s a pretty quick tutorial just to show you how to record your Figma prototypes to a video file using the Crypto Figma plugin. You could do this with screen capture software, but if you’re already using the Crypto Figma plugin or if you just want a a really seamless way that doesn’t require any additional software, this is a really simple way to go about recording your Figma prototype interactions to a video file that you can share.

I hope you’ve learned something from this Figma tutorial, and you can give it a go in your own workflow with your own user testing sessions and all that sort of thing. I hope you’ve enjoyed watching, and best of luck using the Figma plugin; stay tuned for more Figma tutorials just like this one, as we’ll be dropping a few more very shortly. Stay tuned, and thanks again.