1. Home
  2. UserZoom
  3. UserZoom Integrations

Best practices for testing Figma prototypes

Use these best practices to prepare your Figma prototype for Usability Testing with Navigation Tasks. When you come across questions on how to do something in Figma, refer to the Figma Help Center. Have suggestions for this article? Reach out to your UserZoom Research Partner or Account Manager.

✅ Plan Availability: All Plans

👥 User roles: Owner, Admins, and Researchers

For more information, see our article on how to find your plan and user role.

 

On this page:

 

 

Set expectations with your participants

  • When setting up your UserZoom study, let participants know:
    • They will be interacting with a prototype that is not a fully functional site.
    • Not all links are functional and that the prototype may be slow to load (Find tips to speed this up below).
  • This can be done on the Welcome page or in a separate message.

 

 

Prepare your pages in Figma

Use these tips to prepare your Figma prototype for Usability Testing with Navigation Tasks.

 

 

Optimize the prototype for the fastest loading

We've found that if a test takes more than 10-15 seconds to load, most participants give up before even getting started.

 

  • Remember, participants 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 participants abandoning the study.
  • This can also make it harder to test on older devices with less memory.

 

 

Create a dedicated testing file

Explain the topic in full. Keep verbiage conversational, succinct, and easy to understand.

 

  • 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.
  • If you use a file with potentially hundreds of additional frames instead of the dedicated testing file, this could impact your ability to test the prototype and could make it impossible for participants on mobile devices to take the study.

 

 

Only include one prototype per Figma page

  • In your dedicated testing file, make sure that there is only one prototype per page.
    • As participants navigate through your prototype(s), each Figma page loads separately, one at a time.
    • As a result, you can optimize loading time by ensuring there is only one prototype loading at any given moment throughout your flow.
  • You can have multiple prototypes per file, but only one per page.

 

 

Compress images

 

  • Compress your images before uploading them to Figma.
  • Figma doesn't compress images by default. Compress them beforehand to avoid loading heavy images and slowing down the workflow.
  • 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.

 

 

Figma Help

 

 

Check memory usage in Figma

Figma has a file size limit set at 2GB. Getting closer to this size can cause performance issues for the Figma file itself and potentially for the prototypes.

To check memory usage in Figma, follow these steps:

  1. Click the Figma logo.
  2. Select View.
  3. Choose Memory use. This toggles a resource use visualization in the top left corner.

 

 

Check the size of a prototype using Chrome

The tips above showed us how to reduce the size of a prototype that will be loaded on the participant device and here’s a way to check the actual size of a prototype using Chrome browser (other browsers have similar capabilities).

  1. Go to the prototype you want to check the size of in the Chrome browser.
  2. Open Developer tools.
    • MacOS:
      1. Click View.
      2. Select Developer.
      3. Choose Developer Tools.
    • Windows:
      • Click the Menu (3 dots).
      • Select More Tools.
      • Choose Developer Tools.
  3. Go to the Network tab.
  4. Refresh the page so the Network tab can gather data.
    • In the footer, you’ll find information about resources and the time it took to load and render the prototype.
    • Remember that an empty Figma prototype is ~25MB. It is not possible to get below that size when optimizing the prototype.
    • To understand how long it will take to load the prototype for a participant that has never used Figma:
      1. Select Disable cache (directly below the Network tab).
      2. Refresh the page.
    • To emulate different Internet speeds:
      1. Click the No throttling dropdown.
      2. Choose your speed option.
      3. Refresh the browser to see the effect of the throttling.

 

 

Set up permissions and prototype options

Remember to make sure your prototype is accessible outside of your company’s network. Use these steps to get a shareable URL of your Figma prototype to use in UserZoom:

 

  1. Open your design file in Figma.
  2. Select the starting page of the prototype/flow you want to test.
  3. Click Present/Play in the toolbar to access the prototype view.
    • Every page has a unique prototype link.
    • Make sure to select the correct starting point for each task/ flow you want to test.
  4. In prototype view, click Share prototypes in the toolbar to set the permissions for the prototype you want to test.
  5. Set the permissions to Anyone with the link can view and close the modal.
  6. Open the Options menu in the toolbar to set how you want participants to view the prototype.
    • Desktop prototypes: Use the Fit width option.
    • Mobile prototypes: Use Fit to screen.

      Remember to test to make sure you are happy with the results.
  7. To avoid confusing participants not familiar with working with prototypes, deselect these options:
    • Show hotspot hints on click
    • Show sidebar
    • Show Figma UI
  8. IMPORTANT: Remember that changing any of the prototype options will modify the URL.
  9. Copy the new URL by clicking on the Copy sharing link button at the bottom of the page, directly from the browser or using ⌘L (if using the Figma app).
  10. If you want to make adjustments to the options selected, you can show the Figma UI again by pressing ⌘\ or removing the &hide-ui=1 portion of the URL. 
    For example:
    https://www.figma.com/proto/BTxSsf0YRYu8j5Ny/Testing-a-prototype?node-id=1%3A3&scaling=scale-down-width&page-id=0%3A1&starting-point-node-id=1%3A2&hotspot-hints=0&hide-ui=1

 

 

Identify the starting URL for the UserZoom task

Follow these steps after setting up your Figma prototype.

  1. Copy the new URL for the starting page of your flow. The copied URL is the one to be used as the Starting (Initial) URL to begin each task in UserZoom.
  2. Identify each step/page of the task(s) you’re testing.
    • Each page and frame in your prototype flow is identified with a unique node ID.
    • You’ll be able to use the node ID to automatically verify which users were successful (URL Validation) or retrace user flows after your research is complete.
    • Sample Prototype URL:
      https://www.figma.com/proto/G13g0f6P/Current-Experience?page-id=115%3A15263&node-id=487%3A36874&viewport=286%2C48%2C0.04&starting-point-node-id=487%3A36874&scaling=min-zoom&hotspot-hints=0&hide-ui=1
  3. Test the study from outside your company’s firewall (For example, using your home computer) to make sure you’ve given public access to your prototype.

 

 

Validate URL success using Figma prototypes

  • Figma URLs are dynamically created as users navigate your prototype.
    • That means the same pages viewed by different users can have variations in the URL string for each user (i.e., they may not be exactly the same).
    • Here’s the URL for Participant A: https://www.figma.com/proto/RcullgsP60Sh4LG13g0f6P/Current-Experience?page-id=115%3A15263&node-id=115%3A23340&viewport=302%2F48%2C0.04&scaling=contain&starting-point-node-id=487%3A36874&hotspot-hints=0&hide-ui=1
    • And the same page viewed by Participant B: https://www.figma.com/proto/RcullgsP60Sh4LG13g0f6P/Current-Experience?page-id=115%3A15263&node-id=115%3A23340&viewport=286%2C48%2C0.04&scaling=contain&starting-point-node-id=487%3A36874&hotspot-hints=0&hide-ui=1
  • To account for that variation, use the URL Contains setting for URL validation using the Unique Node ID that was developed for the specific page or panel.
  • IMPORTANT: In Figma, overlays will have the same URL as the page from which they are triggered. If you need to track click paths, use prototype pages instead of overlays.

 

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. 

Was this article helpful?
2 out of 2 found this helpful

Articles in this section

See more