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.
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.
How does Figma's interactive components feature work in Maze?
You don’t have to do anything different to use interactive components with Maze if you're part of the beta. Just build your path 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
At launch, there are a few limitations to our 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.
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.