1. Knowledge Base Home
  2. UserZoom
  3. UserZoom Integrations

Figma prototypes with UserZoom: Best practices

This article applies to: uz logo tiny.png UserZoom

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.

✅ 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 interact with a prototype that is not a fully functional site.
    • Not all links are functional and 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.

  • 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 testing harder 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 a time 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

Here’s how 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's 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 who 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 prototype 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.


  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.

 

 

Related content

information icon.png

knowledge icon.png

Want to learn more? Check out these Knowledge Base articles... 

Interested in growing your skills? Check out our University courses...

video icon 2.png

team icon.png

Need hands-on training?

Can't find your answer?

Reach out to Support or our Professional Services team.

 

Was this article helpful?

Articles in this section

See more