Test Figma prototypes with UserTesting

Learn how to test Figma prototypes with UserTesting.

 

This article applies to: UserTesting 

 

On this page:

• About Figma
• Edit prototype share settings in Figma
• Create your test in UserTesting
• Share results with the FigJam integration
• Best practices for testing Figma prototypes

 

---

 

About Figma

• Figma is a design tool used to create interactive prototypes and build meaningful products collaboratively with your team. 
• When combined with UserTesting, you can collect feedback on your Figma prototypes that generate actionable insight from your desired audience. 
• The FigJam integration allows you to embed and watch UserTesting clips and session videos.
• Want to learn more about Figma? Check out the Figma Help Center.

 

 

Edit prototype share settings in Figma

1. Open your design file.
2. Click Play to enter presentation mode.
3. In the menu bar, select Share Prototype.
4. Under the Link Sharing Discovery settings, choose Anyone with the link. Refer to the Figma Help Center for security information for public links.
5. Click Options in the toolbar to adjust how you want contributors to view your prototype:
   • Desktop prototypes: Select Fit width.
   • Mobile Prototypes: Select Fit to screen.
6. Deselect these options to avoid confusion for contributors not familiar with prototypes:
   • Show hotspot hints on click
   • Show sidebar
   • Show Figma UI
7. Click Copy link to copy your prototype's URL to the clipboard. 
   Note: Changing any of your prototype options will change your URL. 

 

 

Create your test in UserTesting

1. Click Create test then Create a test.
   
   
   
2. Choose Prototype in the What are you testing? window.
   
   
   
3. Add your audience.
4. Build your test plan.
   • Remember to include any necessary context for each scenario.
   • For example, prepare your contributors to interact with your prototype by explaining the following: “You will be shown a prototype, please note that not all elements on the page will be interactive.”
     
   • For mobile tests, select the native browser requirement.
     
     
     
5. Add the URL for your prototype to the task.
   • Add as many additional tasks as you need without having to include the prototype URL for each task.
   • Contributors will complete each task in the prototype URL that you initially added.
   • Only add a new URL if you're using a different prototype example.  
     
     
     
6. Click Preview test plan to see the contributor view and make sure your test flows as expected.
   Pro tip: Preview your test in an Incognito window to make sure it can be accessed by anyone.
7. Once you've confirmed that everything is working as intended, launch your test.

 

 

Share results with the FigJam integration

• After your test is completed, bring your results to life by embedding clips, sessions, and highlight reels in your FigJam whiteboards.
• Use our FigJam integration and FigJam template.

 

 

Best practices for testing Figma prototypes

Set expectations with your contributors

• In the scenario of your test plan, tell contributors they will be interacting with a prototype that is not a fully functional site.
• Not all links will work, and the prototype may be slow to load.

 

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 your Figma file with the designs you want to test.
• In the new file, remove any pages, frames, assets, images, and elements not relevant to testing for a clean and lightweight testing file.

 

Set checkpoints if your prototype is complex

• If there’s an area in your prototype where someone could get lost, add checkpoints in your test.
• This prepares the user to begin each stage of 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 important if using a PNG with photographic elements that may cause large file sizes.
• Use the Downsize Figma plugin to compress large images.

 

Use Smart Animate sparingly

• Use Smart Animate only when needed to decrease loading time.
• Try more simple transitions that will use less RAM.

 

Securely share your test with contributors

• You can require your contributors to sign your company’s NDA before accepting your test if additional confidentiality is required. 
• Find more information in the Figma Help Center about securely sharing public links.

 

 

Related content

Want to learn more? Check out these Knowledge Base articles...  What is prototype testing? Secure prototype hosting	Prefer a short video? Check out our University courses... Prototype testing with Figma How to use prototype hosting
Need hands-on training? Find a live, virtual class that fits your needs. Enroll in one of our UserTesting certification programs.	Can't find your answer? Check out our CommUnity forums. Reach out to Support or our Professional Services team.