To take advantage of the fast and efficient testing provided by Maze, we recommend optimizing your Figma prototype before importing it into Maze. This ensures shorter loading times and decreased payload for testers.
Before you start
- Set the permissions for your Figma file and prototype to Anyone with the link can view. If you don't, the prototype preview will not load and testers won't be able to view your prototype in the test.
- Have at least two screens in your Figma prototype and hotspots on the first screen linking to the second. Otherwise, you won't be able to import.
- We don't support interactive components yet. More updates coming soon!
Why it's important to optimize your Figma files and prototypes
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 Figma has to load your entire file when loading Figma prototypes in Maze.
Mobile device users in particular can struggle to open the file 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.
Keep in mind that Figma files can become quite large, either because they include multiple pages with lots of additional frames, or because the prototype frames are very large and/or contain high resolution embedded PNGs. Files that are too large may lead to loading issues when importing prototypes as well as when testing.
Optimizing your Figma files and prototypes ensures a light testing experience, and avoids biased data such as give-ups or bounces due to performance issues.
Before publishing your maze live, always confirm that the prototypes within your tests are performing as expected.
When you import your prototype into Maze, all frames and pages within that file have to be loaded and processed. This might cause importing issues, or make your prototype slow to load and respond for testers.
We highly recommend following these tips to optimize your Figma prototypes for Maze, especially if you see that your prototype takes a while to load or is crashing for testers:
Create a dedicated testing file. Duplicate your working Figma file, then use the copy for the prototype that you'll use for testing with Maze. Remove any pages, frames, assets, images, and elements not relevant to testing before importing. This ensures a clean and lightweight testing file. If you import your working file with potentially hundreds of additional frames instead of the dedicated testing file, this could make it impossible for testers on mobile devices to take the test.
Limit your frames and pages. If your prototype includes a lot of screens, importing will take longer and the testing experience may be slower than usual. To avoid that, we recommend limiting the number of frames and pages in your prototype to the ones you need for testing. Limiting the size of your prototype to match the scope of your test makes the creation of a test a lot easier. You'll also avoid having testers abandon the test because of performance issues, thus biasing your test results. Fewer screens to go through means fewer errors when setting up a test and more accurate test results.
- Compress images. Figma doesn't compress images by default. Compress your images before uploading them to Figma to avoid loading heavy images and slowing down the workflow. This is especially important if working with elements containing large embedded photos (e.g. avatars), which may result in very large file sizes.
Use frames for screens. Maze is designed around the assumption that each screen you'll be testing is a top-level frame within your Figma file. If your screens aren't contained in frames, or if your screens are components that don't reside within a frame, Maze will have trouble processing your prototype correctly.
When you're done, refresh the prototype in Maze with the changes.