With Userbrain, you can test with your Figma Prototype, as long as it has public link that can be shared. Simply put, if you can link to it, you can test it.

However, sometimes when working with large projects within Figma, you may encounter times when a tester cannot load your design.

The Problem

Mobile device users in particular can struggle to open tests associated with large Figma files or prototypes because of the relatively small amount of memory they have. On iOS devices, the memory limits implemented by Apple may cause the prototype to time out, or to crash completely and the prototype will not load.

Loading a large working file with a very large number of frames, tens of thousands of layers, or large embedded images can require too much memory (RAM) and severely impact loading times. Ultimately, this may cause issues when loading the prototype on iOS or Android mobile devices. For more information on how to reduce memory usage when accessing Figma prototypes, please checkout this article: Reduce memory usage in files.

Our Suggested Solutions

  • Create a dedicated testing file
  • Limit the number of pages
  • Limit frames
  • Compress images
  • Streamline custom fonts
Create a dedicated testing file

Duplicate your working Figma file, remove all pages, frames, assets, images, and elements not relevant to testing. Then follow our tutorial here on how to set the prototype to be accessible to anyone with the link.

Loading a large working file instead of a dedicated testing file could make it impossible for testers to load the test on their device.

Limit the number of pages

Remove all pages except the one that contains the prototype you're testing. Removing all pages that are not relevant to testing helps ensure a clean and lightweight testing file.

Limit your frames

Sizing down your prototype to match the scope of your test makes the creation of a test a lot smoother. Limit the number of frames in your prototype to the ones you need for testing.

Avoid duplicating entire frames just to change the state of one element on the screen. Consider using overlays or interactive components when possible to reduce the number of frames in your test.

Compress images

Figma doesn't compress images by default. Compress your images before uploading them to Figma to avoid loading heavy images. This is especially important if working with elements containing large embedded photos (e.g. avatars), which may result in very large file sizes.

Use JPG for any images that contain photographic elements. PNG cannot handle large numbers of colors (such as in a photo) without increasing the file size significantly.

While we don't endorse specific plugins, you may find plugins such as Downsize useful to quickly compress and convert images.

In some cases, copying images as PNG and pasting them on the same image container can also help. This will automatically replace the image with a compressed version the same size as the canvas.

Streamline custom fonts

Because of the way Figma works, custom fonts can also impact the size of your Figma prototype. Any custom fonts need to be downloaded before testers can view your Figma prototype.

As a result, a large number of custom fonts or very large individual font files can negatively impact the loading times for your prototype. Depending on how large the font files are, this may even prevent testers from viewing your prototype on mobile devices.

If using a custom icon font, consider converting the icons to outlines to minimize the usage of custom fonts.

As always, if you have any questions or if we can help assist in any way, please don't hesitate to reach out via email: support@userbrain.com