Prototype Testing with Figma

On this page:

• About Figma
• Editing Share Settings for Prototype
• Setting Up Your Test
• Best Practices for Testing Figma Prototypes
• Sharing Results via FigJam Integration

About Figma

Figma is a collaborative design tool for designing interactive prototypes, building meaningful products, and collecting feedback from your team. With UserTesting, you can collect feedback on your Figma prototypes and generate actionable insight from your desired audience. Additionally, you can embed and watch UserTesting clips and session videos using the FigJam integration.

Need help using Figma? Check out the Figma Help Center.

Editing Share Settings for Prototype

In Figma:

1. From your design file, select the play icon to enter presentation mode.
2. Choose the Share Prototype button in the menu bar. This will open the Sharing modal for the Prototype.
3. Adjust the Link Sharing Discovery settings to Anyone with the link. View the Figma Help Center for help with managing the security of public link sharing.
4. Open the Options menu in the toolbar to set how you want contributors to view the prototype.

• • Desktop prototypes: Use the Fit width option.
  • Mobile prototypes: Use Fit to screen.

5. To avoid confusing contributors not familiar with prototypes, deselect these options:

• • Show hotspot hints on click
  • Show sidebar
  • Show Figma UI

6. Select Copy link to copy the prototype’s URL to your clipboard.

💡Note: Remember that changing any of the prototype options will modify the URL.

Setting Up Your Test

In UserTesting:

1. Select Create test, then Create a test.
   
2. Choose Prototype.
   
3. Add your audience. You can select test contributors from the UserTesting Contributor Network or your own.
   
4. Build your test plan. Include any necessary context in the scenario. For instance, in order to prepare your contributors for interacting with the prototype, you might write something like this: “You will be shown a prototype, please note that not all elements on the page will be interactive.”
   💡Note: For mobile, select the native browser requirement.
   
5. Provide the shareable URL to your Figma prototype within a task. Then, add as many tasks as you need after the URL asset. You do not need to specify the URL for every task; contributors will complete the tasks at that URL unless you specify a new URL.
   
6. Use Preview test plan to review the flow of the tasks from the contributor’s perspective. Once everything looks good, launch the test.
   💡Tip: Preview your prototype in an incognito window to ensure everyone can access it.

Best Practices for Testing Figma Prototypes

• Set expectations with your contributors. Let contributors know that they will be interacting with a prototype that is not a fully functional site. Not all links are functional, and the prototype may be slow to load. This can be done in the Scenario of your test plan.
• Optimize the prototype for the fastest loading. Remember that contributors are joining from their home internet connections, and not everyone has high-speed internet. A large, heavyweight prototype takes longer to load and can lead to contributors abandoning the test.
• Create a dedicated testing file. Duplicate the Figma file containing the designs you want to test. In this newly created file, remove any pages, frames, assets, images, and elements not relevant to testing to ensure a clean and lightweight testing file.
• Set checkpoints if your prototype is complex. If there’s a possibility that someone could become “lost” while exploring your prototype, add checkpoints into your test flow to ensure that the user begins each stage for your test in the right place. Figma supports multiple “flow starting points” that can achieve this.
• Compress images before uploading them to Figma. This is especially important if inserting PNG with photographic elements that may result in very large file sizes. One option to try is Downsize, a Figma plugin for compressing images.
• Use Smart Animate sparingly. Reduce the use of Smart Animate whenever possible to decrease loading time. Instead, use simpler transitions that will require less RAM.
• Ensure your test is securely shared with contributors. You can require your contributors to sign your company’s NDA before accepting your test if additional confidentiality is required. View the Figma Help Center for help with managing the security of public link sharing.

Sharing Results via FigJam Integration

After conducting your test, bring your results to life by embedding UserTesting clips, sessions, and highlight reels directly in your FigJam whiteboards. Leverage our FigJam integration as well as our FigJam template to get the process started.

Please provide any feedback you have on this article. Your feedback will be used to improve the article and should take no more than 5 minutes to complete. Article evaluations will remain completely confidential unless you request a follow-up.