Best practices for testing Figma prototypes

  • Updated on

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

  • 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 resource usage in Figma

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

To check resource usage in Figma, follow these steps:

  1. Click the Figma logo in the toolbar.
  2. Select View.
  3. Choose Resource use.
    Figma_resource_use.png
  4. Use this icon in the toolbar to toggle resource use visualization.
    Figma_resource_use_visualization_icon.png

 

 

Check the size of a prototype using Chrome

These steps are just for the Google Chrome browser. If using a browser other than Chrome, refer to their Help Center or support for help checking the size of your prototype.

  1. Access your prototype in Chrome.
  2. Open Developer Tools following these steps based on your operating system:
    • MacOS
      1. Click View.
      2. Select Developer.
      3. Choose Developer Tools.
    • Windows
      1. Click the three dots at the top right.
      2. Select More Tools.
      3. Choose Developer Tools.
  3. In Developer Tools, go to the Network tab.
    Developer_Tools_Network_tab.png
  4. Refresh the page to get updated data.
  5. In the browser footer, find information about resources and the amount of time it took to load and render the prototype.
    • Remember that an empty Figma prototype is ~25MB.
    • It's not possible to get below that size when optimizing a prototype.
      Figma_resources_used_and_load_time_footer.png
  6. To understand how long it will take a participant who has not used Figma before to load the prototype:
    1. Select Disable cache.
    2. Refresh the page.
  7. To emulate different internet speeds:
    1. Select the No throttling dropdown.
    2. Choose a speed.
    3. Refresh the page to see the results based on the chosen speed.

 

 

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.
          starting_page.jpg
      4. In prototype view, click Share prototypes in the toolbar to set the permissions for the prototype you want to test.
        share_prototype_button.jpg
      5. Set the permissions to Anyone with the link can view and close the modal.
        anyone_with_the_link_can_view.jpg
      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
          Desktop settings
          desktop_settings.jpg
          Mobile settings
          mobile_settings.jpg
      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).
        copy_sharing_link.jpg
      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.
        starting_url.jpg
      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.
        unique_node_id.jpg
      • 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.
        overlays.jpg

 

 

Was this article helpful?

Related articles

Related articles