Skip to main content

Using Figma's interactive components feature with Maze

Laura Cunha
  • Updated

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. 

Please note that testers will be able to interact with interactive components in your Figma prototype, regardless of whether or not you've enabled this feature on the maze. But if you need these interactions to appear in the path analysis, you'll need to enable the interactive components feature.

In this article:

Before you start

Enabling 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. You can just leave the interactive components toggle disabled on the maze draft — the interactive components will still work.

maze-builder-interactive-component.gif

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:

  1. Import your Figma prototype containing interactive components.
  2. 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. Note that this toggle only appears if interactive components are detected in the Figma file.
    Enabling/disabling interactive components will clear any paths you may have previously set.
    maze-builder-interactive-components-on.webp
  3. If needed, enable Track non-click events. When this setting is not enabled, only state changes triggered by a click will be registered. When this setting is enabled, all interactions (i.e. clicks, as well as hovers, drags, and other triggers) will appear in the results. For instance, if a tester hovers over an element, then moves the mouse away, this will register as three separate screens in the path analysis: the first for the un-hovered state, the second for the hovered state, and the third back to the un-hovered state.
  4. Set the expected 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. Pay close attention to the end states of the screens, as these will impact how success is measured. How do interactive components work with results and reporting in Maze?
    maze-builder-interactive-components-paths-with-interactions.webp

How do interactive components work with results and reporting in Maze?

For a mission to be successful, the end state of the screen must be exactly matched with what you defined when in the paths. Why are testers getting stuck on my prototype with interactive components?

Expected path

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.

defined-path.png

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.

direct-success.png

Indirect success

Testers who complete the mission, but deviate from the order and/or end states you've established for each screen.

indirect-success.png

Mission unfinished

Testers who abandoned the mission, or didn't reach 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.

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.

Learn more about common Figma errors

Still need help?

If you have any questions or concerns, please let our Support team know — we'll be happy to help!

Related articles