Overview
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.
Solution
If you're seeing this warning, before importing we recommend following these best practices for a lighter Figma file:
- 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 use that copy for testing with Maze.
Importing a large working file instead of a dedicated testing file 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
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 (⌘⇧C) 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. For tips on how to optimize your custom font file, see the following articles:
Still need help?
If you have any questions or concerns, please let our Support team know — we'll be happy to help!