Web Design » Figma » How Do You Record a Figma Prototype Video?

How Do You Record a Figma Prototype Video?

Last updated on February 20, 2023 @ 4:24 pm

As a design tool, Figma is unrivaled. It’s vector-based, web-based, and free to use, making it the perfect tool for modern designers.

One of the best things about Figma is that it’s easy to create prototypes and record videos of them. In this article, we’ll show you how to record a Figma prototype video.

First, open up your Figma file and go to the “Prototype” tab. Here, you’ll see all of the different screens or states that your design can have. Check if all your connection.

Once done, next is to select the “Play” button at the top right corner to open the preview of the prototype.

In the preview window of the prototype design, select the “Share prototype” button.

Then, select the “Copy link” option in the pop-up window that will appear.

Now, open your Chrome browser, then paste the link that you copied into the search bar at the top and press the “Enter” key on your keyboard.

Once the Figma Prototype Preview is open in your browser, go to the upper menu and select the “Screen Recorder” button.

NOTE: If the Screen Recorder extension is not yet installed in your browser, just type in “screen recorder for google chrome” in Google’s search bar and open the page with the screen recorder installer, then select the “Add to Chrome” button.

A pop-up window will appear asking you to choose the recording settings. You can choose to record your entire screen or just a specific region.

You can also choose whether to include audio in your recording.

Once you’ve chosen your recording settings, click on the “Start Recording” button. Figma will then start recording your prototype.

You will then be asked to choose what screen to share. In this window, select the Figma prototype window under the Chrome Tab and click on the “Share” button.

While recording, make the necessary interactions to put your Figma prototype into action.

To stop recording, click on the “Stop sharing” button in the top-left corner.

A pop-up window will then appear with a  preview of the recorded video. Check the contents of the video and select the “Save” button to save it in your files. Your recorded video will automatically be saved as a .mp4 file in your “Figma Files” folder.

PRO TIP: If you are planning on recording a Figma prototype video, there are a few things you should keep in mind. First, make sure that the prototype is set to play at the correct speed. Otherwise, the video will appear choppy or slow. Second, use a high-quality camera to record the video. Otherwise, the video quality will be poor. Finally, make sure to edit the video after recording it to ensure that it is clear and concise.

How Do You Record a Figma Prototype Video?

Recording a Figma prototype video is easy! Just open up your prototype in Figma and share the link with your Chrome browser. From there, click on the “Screen Recorder” button in the top-right corner. Choose your recording settings and click on “Start Recording.” When you’re done, click on “Stop sharing” and save your video.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.