How To Record Your Figma Prototype - The Best Way
Figma is a great tool to create UX prototypes of your product or if you want to highlight specific features of your product. That is if you plan to give live demonstrations where you control the flow.
When it comes to sharing a video of your prototype, Figma falls short. There is no recording feature in Figma. So you will have to get a screen recorder to record the animation in your prototype.
This is how we have been using CrankWheel to record the prototypes that we use for explainer videos, GIFs and other marketing material.
To get a better idea of how to record your prototype, watch the video below:
Shortcuts:
How to Record Figma Prototype
1. Do The Prep Work
We’ll assume that you have already created the Figma Prototype. But make sure that everything is in order. Check if you have the correct dimensions set and if everything is in order such as the right colors, check spelling and so on. Then do a run-through of the prototype. If you want to record any sound, create a script. If you are super confident in what you are going to say, make some bullet points to make sure you cover everything.
2. Set up The Screen Recorder
Start by signing up for CrankWheel. Just type in your email address, go to your inbox and confirm your address. You don’t have to opt-in for the newsletter and you don’t have to invite your team. We recommend that you get the browser extension (Chrome or Edge) and pin it but you can also launch it from the Dashboard.
3. Launch Your Figma prototype
You know the drill. Open the prototype and press Play.
4. Launch The Screen Recorder
Either go to the extension menu in your browser and click the CrankWheel icon or launch it from your CrankWheel dashboard.
5. Choose and Crop around your prototype
While you are hovering inside the CrankWheel UI, press and hold down the Shift button on your keyboard. You will notice that some of the items change. Click Choose and Crop. When prompted, select the tab with the prototype. Launch the Chooser tool and crop the area around your prototype.
6. Record your prototype
Press record in CrankWheel. Start interacting with the prototype. You can pause the recording at any moment and mute and unmute your microphone.
When we need to zoom into a specific part of our prototype, we pause the recording, do Choose and Crop again around that area and resume the recording. When we want to zoom out again, we pause the recording, Choose and Crop the entire prototype and resume the recording.
You can ignore the Screen Sharing options. But if you want to get a preview of what you are doing, copy the meeting URL and open it in a new browser window.
7. Stop recording
When you have finished the run, press Stop in the upper right corner of CrankWheel. Your CrankWheel dashboard will automatically open up in a new browser tab. Your video will be uploaded to the cloud.
8. Download and share the recording
Wait until the recording has been processed on the server. When the text box above the video preview turns yellow, press it to reload the page. Click the download icon in the upper right above the video. This is the best way to export your Figma prototype to an MP4.
You can also share a direct link to the video as well as copy an email template that embeds an animated preview gif of your video. You can track opens and engagement of those videos.
Exporting Figma Prototype to Video - FAQ
How to record a GIF of a Figma prototype
The most straightforward way is to record a video of your prototype with CrankWheel as described above. Then download the MP4 and then upload it to a free conversion tool. We have used Cloudconvert - it’s free to use and it’s free of annoying pop-ups.
Does Figma Have a Screen Recording Feature?
Figma does not have a screen recording feature. That’s why it’s best to use a tool with screen recording features such as CrankWheel.
Can I Download Figma Prototype as a Video?
Yes. When the video has been processed, press the download button in the upper right corner. Your recording of the prototype will be downloaded to your device as an MP4 file. You can also share the video of the prototype from the cloud. Just click the share button to see the options.
Can I Embed a Figma Prototype in an Email?
With CrankWheel, you can embed the video of your prototype in an email. When you have finished recording, you will be redirected to the CrankWheel Dashboard. Wait for the recording to upload and process. Reload the page and click Share This Video. Click Copy Email Template. Compose a new email and paste the template. Then an animated GIF will be attached to your message. When the GIF is clicked, the viewer streams the video from our cloud.
You can create multiple links to the same video to track opens and engagement. Just click Manage Share Segments and Overview.
Can You Record a Figma Prototype With a Webcam Bubble?
You can record your webcam while you are recording your prototype. Go through the same steps as above but click on Webcam before hitting record. You can remove the background behind you for the weatherman effect and select where the bubble appears on the screen and the size. You can stop the webcam at any time or start it after you have gone through the demo.