When linking a Figma prototype into Maze, you have the option to either display a version of your prototype, that will always remain the same after sending the maze live, or a live embed, that updates in real-time.
In this article:
- Why enable live prototype embed?
- When shouldn't I enable live prototype embed?
- Supported file permissions
- Before you start
- Enable live prototype embed for your mazes
- Important: Prevent breaking changes in your mazes
- Troubleshooting
Why enable live prototype embed?
- Privacy: When live embed is enabled, Figma’s prototype embed is able to load even if the file is restricted. This allows you to keep more restrictive share settings for your Figma files while reducing the risk of your testers not being able to participate.
- Performance: Because Figma can load the live version more quickly and efficiently than a historical version, the prototype and the mazes take less time to load. This can help prevent errors that come from loading larger prototypes, particularly when testing on iOS devices.
- Flexibility: The latest version of the prototype is displayed using the contents of your Figma file right now. This means that minor tweaks in the design, such as fixing a typo, will be reflected in Maze, without having to refresh the prototype or send out a new maze.
When shouldn't I enable live prototype embed?
Embedding a live prototype in your maze has advantages, but it also carries risks. We wouldn’t recommend always enabling this feature by default.
Live prototype embed might not be a fit if:
- You need to share your maze with hired testers or external users. Learn more about the appropriate Figma permissions for different types of users
- Other members of your team will be making frequent changes to the page within your Figma file that contains the prototype. Learn more about how certain changes can break your mazes if live prototype embed is enabled
- Your testers are not running into trouble loading your maze.
Supported file permissions
When you enable live prototype embed, Figma only requires testers to have access to the prototype, and not to the entire file. This allows you to keep more restrictive share settings for your Figma files.
To learn more, please see: Supported permissions for importing and testing Figma prototypes
Before you start
Before you enable live prototype embed for your maze, we highly recommend taking steps to minimize the risk that changes in the prototype prevent testers from completing the maze.
- Create a dedicated testing file: Create a testing file by duplicating the Figma file you intend to use, and clearly indicate to your team that the file is linked to a live maze.
- Use named versions: Before sending the maze live, create a named version in Figma. This way, you can always revert back to that specific version if needed.
Enable live prototype embed for your mazes
You can enable or disable live embeds for both draft and live mazes when importing a Figma prototype, and at any time via the Maze settings.
When importing a new prototype
- Open a draft maze.
- Add a mission block.
- When adding a Figma prototype, click the toggle Use a live prototype, then click Import.
Via the maze settings
- Open a (draft or live) maze linked to a Figma prototype.
- Open the Maze Settings.
- Click the toggle Use live version under ‘Figma settings’. When this toggle is enabled, Maze will load the live version of your Figma prototype in real-time.
Important: Prevent breaking changes in your mazes
When live embed is enabled, Maze displays the prototype exactly as it is in your Figma file. Testers will see any changes immediately.
While this can be beneficial for your workflow, it also means that significant changes in the prototype pose a risk of breaking the paths you’ve defined in your maze.
In that case, the results of the mission are compromised. For instance, removing a screen or an interaction that is a part of a path may make it impossible for testers to complete the maze.
To avoid this, you should act with extreme caution when making changes to a Figma prototype that is linked to a maze where live embed is enabled.
What is considered a breaking change?
Maze flags a breaking change when:
- A screen that is part of a defined path is removed from the Figma prototype.
- A screen that is part of a defined path is inaccessible — for instance, due to a missing interaction.
However, please note that not all changes that can potentially break paths will be flagged by Maze.
What happens if Maze detects a breaking change?
If a breaking change is detected, Maze will automatically stop collecting new results. This is to avoid a poor tester experience that prevents them from accurately testing, and to reduce the risk of wasting hired tester credits on a test that doesn’t capture the data you had intended to collect.
When results collection is stopped, any active hired tester orders are also stopped and any unused credits will be added to your balance.
Maze editors
The person who has linked the Figma prototype will receive an email notification warning about the changes that have been detected:
We’ve paused collecting answers on your maze as your prototype changed
Changes in your live prototype affected screens in your maze path. Revert the changes in Figma, then restart collecting answers to continue.
Testers
Your testers will also not be able to access the live maze, with the following error appearing when they launch the maze:
This maze can’t be explored right now
We’ve let the maze creator know and it should be fixed soon
Restart testing after reverting a breaking change
To restart testing, we highly recommend undoing the breaking changes in the Figma file, so that your testers are able to navigate through all paths you’ve defined. If you’ve created a named version of the file before sending the maze live, you can easily revert back to that specific version.
Once that is done, you can start recording new results again via the maze settings.
Troubleshooting
Why do I see a “Linking prototype failed, something went wrong” error?
This error message appears when Figma doesn’t give Maze permission to link a prototype.
If you're seeing this error:
- Please ensure that the Figma account that is connected to Maze has permission to view the prototype you’re trying to add. For instance, if your prototype is shared only with people in your organization, only those accounts will be able to import the prototype into Figma.
- If you’ve connected the wrong account (for instance, a personal account instead of your professional one), you can disconnect the Maze app in the Figma account settings, and then log in to the correct account when importing the prototype.
If the steps above don't help, please reach out to our Support team for help.
Why is my maze not loading after importing a Figma prototype?
Overview
If live prototype embed is enabled and the prototype is restricted to specific groups/people, only that internal audience will be able to open the maze using the browser where they’re authenticated into Figma.
For instance, if your prototype is shared only with people in your organization, only logged-in members and guests will be able to load a maze containing that prototype.
Opening a maze preview or a live maze as an unauthenticated user will lead the maze to stall with an endless loader on the ‘Get Started’ button.
Troubleshooting
If you or your testers are seeing this issue:
- Please confirm that your file is using supported Figma permissions.
- If your prototype is restricted to specific groups/people, ensure that you or your testers have access to the Figma prototype, and are logged into Figma using the same browser used to open the maze.
If the steps above don't help, please reach out to our Support team for help.
