Interactive components is a new feature developed by Figma allowing users to create and use defined prototype interactions on a component level by using variants. Please refer to Figma's documentation for more on this feature.
By using interactive components, you can create missions in higher fidelity and lower the number of screens in your prototype thus reducing the loading time and memory usage for testers viewing your prototype. This makes it easier to manage your designs in Figma, and should produce a better tester experience in Maze as well.
Before you start
- Support for interactive components is in early access. Not all users will have access to this feature at this time.
- We're busy working with the Figma team to improve the integration of interactive components into Maze. You might experience issues with more complex prototypes. We recommend you read through the current known limitations before you begin using interactive components with Maze.
How does Figma's interactive components feature work in Maze?
If you're part of the beta, you don’t have to do anything different to use interactive components with Maze. Just build your paths as usual, starting with the first screen and ending with the final screen. Any state changes along the way will show with an icon and count on the relevant page.
Testers will need to click the same interactive components (though not in the exact same order) on each screen in your path where you've interacted with an interactive component in order for their test to be considered a direct success. If they don't but still reach the final screen in the expected path, they'll be considered an indirect success. As such, only interact with interactive components that are integral to the path when you're defining your expected paths.
How do interactive components work with results and reporting in Maze?
Interactive states will be interpreted as interactions in the mission path and will be used in defining direct or indirect success in the results.
- Direct Success: Testers who completed the mission via an expected path and who saw each screen in the path in exact order and who clicked every interactive component you clicked when defining your path will be considered as directly succeeding. They do not need to click those interactive components in the exact same order so long as they click all of the same components as you and trigger the same state changes.
- Indirect Success: Testers who completed the mission but either deviated from the expected path and saw additional screens not in the path, or who did not click all of the same interactive components or clicked additional interactive components that weren't in the path.
- Give-up / Bounce: Testers who didn't complete the mission because they left or gave up before reaching the end.
Known limitations with interactive components in Maze
There are currently a few limitations to our beta support of interactive components that you should be mindful of as you create mazes using Figma prototypes that use this feature. We're working with Figma to address these issues.
State changes triggered by hover should not be used to end your Mission
Only state changes triggered by clicking an interactive component should be used to end your Mission block. Ending your expected path with a hover component state change may cause your maze not to complete when testers participate in the test, and these state changes will not be reflected in results and reporting.
Screens shown in results and reporting will only show the default state
At present, there is no way for us to retrieve copies of your screens from Figma that reflect alternate states. This means that we will always show the default state for any screen images shown in results and reporting, and we will not show interactive component state transitions as separate screens in the results view.
Workaround
You'll still be able to see every time a tester clicks on an interactive component, so you'll be able to tell which interactive components they've interacted with. If you want to see the order in which a particular tester clicked the components, you can use click filters to see the sequence of clicks for screens with multiple component state transitions.
Frames reached only via interactive components cause an "Invalid mission path" error
Frames that can be reached only via interactive components are not correctly synced into Maze, but they're still accessible in the prototype preview and can be added to a path. As a result, when you launch your test live, the unsynced frames are detected, which triggers the "Invalid mission path" error.
If you believe you've been affected by this issue, please let our Support team know.
Workaround
In the meantime, you can get around this error by detaching the component instances, or by using traditional interactions to link your screens.
Troubleshooting other Figma issues
Best practices
You might run into difficulties with your Figma files that are not related to interactive components. We recommend checking out our best practices for optimizing your Figma files for Maze: Creating a Maze-ready Figma prototype
Common issues
You might see certain errors/warnings when importing Figma prototypes. Below you will find our advice for each of those errors to ensure your prototype works as expected in Maze:
- Why am I seeing a "Restricted Figma file" error when I try to import my Figma prototype?
- Why am I seeing a "Missing screens or interactions" error when I try to import my Figma prototype?
- Why am I seeing a "Large frames" error when I import my Figma prototype?
- Why am I seeing a "File is too large" warning when I import my Figma prototype?
- Why am I seeing a "Multiple pages" warning when I import my Figma prototype?