Interactive components is a feature developed by Figma that allows users to create interactions between variants in a component set. Please refer to Figma's documentation to learn more.
By using interactive components, you can create missions with higher fidelity, and lower the number of screens in your prototype. This makes it easier to manage your designs in Figma, and should also produce a better tester experience in Maze by reducing the loading time and memory usage for testers viewing your prototype.
In this article:
- Before you start
- Enable interactive components in Maze
- How do interactive components work with results and reporting in Maze?
- Known limitations with interactive components in Maze
- Troubleshooting other Figma issues
Before you start
- Please read through the current known limitations before you begin using interactive components with Maze.
- We also recommend checking out our best practices for optimizing your Figma files for Maze: Creating a Maze-ready Figma prototype
Enable interactive components in Maze
Testers will be able to interact with interactive components in your Figma prototype, regardless of whether you've enabled interacted components on the maze or not.
If you simply want testers to be able to interact with a realistic prototype (e.g. with functional checkboxes, toggles, etc.) without recording those interactions in the path, you don't have to take any additional steps. Simply leave the interactive components toggle disabled on the maze draft — the interactive components will still work.
On the other hand, if certain interactions are instrumental for the path analysis, you need to allow interactive components to be captured in your paths by following the steps below:
- Add your Figma prototype to your maze.
- In the mission block, enable the toggle Enable interactive components to allow “change to” interactions involving component variants (e.g. enabling/disabling a toggle) to be captured in your expected path.
This will clear any paths you may have previously set.
- Set the desired mission path(s). Any state changes you make to an interactive component (e.g. checking and unchecking a checkbox) via “change to” interactions will be shown in the expected path with an icon and count on the respective screen thumbnail.
- The screen thumbnail will show you the end state of each screen. Pay close attention to the end states of the screens, as these will impact how mission success is measured.
How do interactive components work with results and reporting in Maze?
Success
The success of a mission block is measured by comparing the paths you defined in the maze builder and the way testers interacted with the mission.
If you enabled interactive components in your maze, the end states of the screens are also taken into consideration. A mission is considered complete when a tester reaches the last screen in the path as well as the end state of that last screen.
Direct Success
Testers who complete the mission by clicking every screen and reaching the end state you established for each screen in the path. They do not need to click the interactive components in the same order, as long as the end state for each screen is the same.
Indirect Success
Testers who complete the mission, but deviate from the order and/or end states you've established for each screen.
Give-up / Bounce
Testers who didn't complete the mission because they left or gave up before reaching the final screen and respective end state.
Aggregated paths
A single success path might result in multiple aggregated success paths in your mission results and in your maze report. This happens because the Results dashboard does take the sequence of state changes into account when aggregating paths.
As such, paths are aggregated depending on the sequence of screens and the end states of those screens.
- Paths are aggregated if all screens and their end states are in the same order and the interactive components are interacted with in the same sequence.
- Paths are not aggregated if some of the end states don't match and/or the interactive components aren't interacted with in the same sequence, even if the screen order is the same.
Known limitations with interactive components in Maze
There are currently a few limitations to our support of interactive components that you should be mindful of.
- At the moment, Maze doesn't support interactive components when live embed is enabled.
- Why am I getting an "Invalid mission path" error when I try to launch my maze live?
- Why are my testers getting stuck on my prototype with interactive components?
- Why are my interactive components with overrides displaying the default version of the component in the results and report?
- Why are hovers and other triggers not recorded in my heatmap?
- Why are the results for certain missions not being recorded?
Our team has been continuously working to make our Figma integration as smooth as possible. If you have any feedback about the current limitations, or are running into issues that you believe go beyond them, please reach out to our team — we'll be happy to help!
Troubleshooting other Figma issues
You might run into difficulties with your Figma files that are not related to interactive components.
Still need help?
If you have any questions or concerns, please let our Support team know — we'll be happy to help!