Best practices: Figma prototypes

Learn how to optimize your Figma prototype for use with Alida's unmoderated usability testing functionality.

Creating the Figma prototype

When you are first creating your prototype, keep these considerations in mind:
  • Ensure the file has at least two frames.
  • Define the hotspots you want participants to click.
  • Use simple transitions that require less memory to load instead of Smart Animate.
  • Standalone screens that are not linked to other frames are supported and will be selectable during the Import Prototype process as long as they're part of a flow.
You should also think about optimizing screen layouts, dimensions, and interactions for heatmap reporting:

  • Vertical overflow. In cases where participants have to scroll down to reach the end of a longer screen, put all the content into one long screen instead of breaking it up into truncated screens. If you use truncated screens and participants click content that's below the fold, these clicks will not appear in heatmaps.

    Recommended Not recommended

  • Horizontal overflow. If your prototype forces participants to scroll horizontally, the leftmost or rightmost portion of the screen will not appear in heatmaps. In the example prototype shown below, the resulting heatmap will not display Jungle Hut or Modern Villa or the click interactions on those answer options.

  • Overlay effects. Let's say you have to show an interaction where someone clicks a control and a small modal dialog opens on top of a larger page. To create this effect, we recommend duplicating and darkening the larger page, layering the small modal dialog on top, and using Navigate to as the interaction action between the first and second screen. We do not recommend featuring just the small modal dialog as the second screen and using Open overlay. If you do the latter, the image dimensions and heatmap coordinates will be inconsistent between the first and second screens, which will result in inaccurate heatmap reporting.

    Recommended:

    Not recommended:

  • Prototype sizes. The heatmap viewports are set to specific desktop and mobile dimensions.
    • Desktop: 1920 x 1080 pixels (or a 16:9 aspect ratio)
      • Screens smaller than 1920 x 1080 pixels are scaled up as long as they follow the 16:9 aspect ratio.
      • If the screen is too large, you'll need to scroll vertically to view different areas of the heatmap.
    • Mobile: 390 x 844 pixels, 375 x 812 pixels, or a similar aspect ratio
      • If the screen is too large, you'll need to scroll vertically to view different areas of the heatmap.

  • Supported interactions. The heatmaps only capture On click interactions in desktop prototypes and On tap interactions in mobile prototypes. They do not capture any other interaction type. For example, if you hover over an information icon and a pop-up appears, this interaction is not captured. However, if you click on the information icon or the pop-up, these interactions will appear in the heatmap.

  • Empty screens. Complex prototypes that use a combination of empty screens, unsupported interactions, and Smart Animate to achieve an animation or flyover effect do not display well in heatmaps. The resulting path heatmaps will have lots of empty screens you'll have to click through. These empty screens can also muddle the success path calculations, resulting in inaccurate reporting on the number of indirect success paths.

Streamlining the Figma prototype

Participants may not always have high-speed Internet connections. Large prototype files take longer to load and can lead to higher drop-off rates. Follow these best practices to make your file as lightweight as possible:
  • Duplicate your Figma prototype to create a dedicated testing file, and keep only the designs you want to test.
  • The Usability Task question only supports testing one path at a time. In the testing file, remove any flows that are not part of the test.
  • Clean up unnecessary screens, fonts, frames, assets, images, and elements.
  • Limit the size and number of frames, and compress large images.
  • Delete hidden layers.
    1. Select frames in Figma and initiate an Action.
    2. Run the Detach all nested instances action.
    3. Select the frames again.
    4. Run the plugin Delete Hidden Layers.

Figma file settings

Follow these tips to ensure the Figma prototype will load successfully during authoring and responding:
  • Grant access permissions to Anyone with the link.
  • Password protection is supported in the Alida platform. If you choose to use password protection, set it up in the Figma file. Share the password with participants in the question text.
  • Ensure the expiration date matches or exceeds the survey's duration.
  • Use a figma.com/proto/ link to link the prototype.