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.
In this article:
- Before you start
- Why is it important to optimize your Figma files and prototypes?
- Optimization tips
- Preview
- Troubleshooting common issues
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. Note that selecting "Anyone with a link [can view prototypes only]" will also result in an error, since Maze needs access to the file as well.
- Remove password protection from your Figma link. Password-protected links are not currently supported, and will cause an error during import.
- 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.
- At the moment, we offer limited support for interactive components. More updates coming soon!
Why is it 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 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.
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.
Optimization tips
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.
When you're done, refresh the prototype in Maze with the changes.
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.
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.
Preview
Previewing is a great way to ensure your maze flows nicely, and that your users see what you want them to see.
Testing your maze beforehand will help ensure you and your team are completely happy with the content and performance. Please note that certain changes aren't allowed after sending a maze live.
To preview your maze:
- Open a draft maze, or create a new maze.
- Click on the Preview button in the top right corner.
This will allow you to see how your testers will experience your maze without recording any data.
Troubleshooting Figma issues
When importing and using Figma prototypes, you might run into certain issues. Follow our advice to ensure your prototype works as expected in Maze. Learn more here: Troubleshooting Figma errors
Still need help?
If you have any questions or concerns, please let our Support team know — we'll be happy to help!