Prepare your Figma prototype before testing

Learn how to prepare your Figma prototype before testing it in UserTesting

 

This article applies to: UserTesting 

 

On this page:

• About Figma
• Edit prototype share settings in Figma
• 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. 

• There are two ways you can test Figma prototypes with UserTesting.

  • Add the Figma task to an Interaction test to understand how users navigate. Follow the test set-up steps here.
  • Create a Think-out-loud test for more qualitative feedback on your prototype.
• 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. Click Copy link to copy your prototype's URL to the clipboard. 
   Note: Changing any of your prototype options will change your URL. 

 

 

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.
• We recommend reducing the size as much as possible for the best testing experience.

 

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 Getting started with Figma task	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.