We use Figma's prototype embed feature when loading Figma prototypes so that your prototypes render exactly as they appear in Figma. This allows you to take advantage of many of their native features, but it also means that you may encounter issues when loading particularly large Figma prototypes or files in Maze.
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 test to time out and crash completely or you may be returned to the welcome screen repeatedly.
Importing 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 importing the prototype, and when opening and interacting with the test.
If we detect that your Figma file might take too long to load, you'll see one of the following warnings before importing your prototype:
File is quite large: Files that are too large may load slowly or time out during testing. Consider optimizing your file.
File is too large: Files that are too large may load slowly or time out during testing. Consider optimizing your file.
If you're seeing this warning, before importing we recommend following these steps for a lighter Figma file:
- Create a dedicated testing file. Duplicate your working Figma file, remove all pages, frames, assets, images, and elements not relevant to testing, then use that copy for testing with Maze. If you import your large working file instead of a dedicated testing file, this could make it impossible for testers to load the test.
- 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. Limit the number of frames in your prototype to the ones you need for testing. Sizing down your prototype to match the scope of your test makes the creation of a test a lot smoother. Avoid duplicating entire frames just to change the state of one element in 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 since 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.
- 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. For tips on how to optimize your custom font file, see the following articles: Reduce WebFont Size and Reduce & Optimize Web Fonts For Page Speed.