Skip to main content

Figma: Setting up your file for prototype testing

Updated over 2 months ago

This guide will help you set up your Figma prototype files correctly for unmoderated prototype testing on Askable. Proper setup ensures optimal display for participants and generates accurate heat maps and your desired test results.

To reduce load time for participants and easiest task setup we recommend creating a dedicated Figma file that only contains the necessary frames and connections for your prototype test.


Recommended Frame Sizes

Desktop Prototypes

  • Min Width: 860px

  • Max Width: 1440px

    Wider desktop prototypes may scale down based on participant screen size, smaller content will be less visible as prototypes scale to fit the width of participants device.

  • Height: Variable based on content
    16:9 aspect ratio is recommended if no scrolling is required to best fit participant screen size

Mobile Prototypes

  • Min Width: 320px

  • Max Width: 440px

  • Height: Variable based on content
(Recommended 832px Minimum to best fit most participant mobile screens)


Prototype scaling

Askable prototype test uses "Fit width" scaling for all prototypes, which ensures your prototype properly adapts to participants' screens. This means:

  • Your prototype will maintain its aspect ratio

  • The full width of your prototype will be visible

  • Users may need to scroll vertically depending on their screen size

Note: To best simulate the participant view of your prototype in Figma; preview your prototype and set the scaling option to ‘Fit width’.


Figma device frame options

Desktop Prototypes

Don't use any device frame in your prototype settings, this provides the cleanest and most accurate experience for desktop prototype testing.

Mobile prototypes

Mobile prototype tests conducted by participants on a mobile phone will hide any prototype device frames by default and display to fit the device width. (If you are only conducting the study on mobile only it is recommended to not apply a device frame)

You can apply a mobile device frame to help desktop users understand they're viewing a mobile interface if the participant conducts the test on a desktop device.

Note: We recommend against conducting a prototype test of a desktop experience with participants on mobile devices to avoid legibility and accessibility issues.


Interactive Components and Overlays

Interactive Components

Interactive components only display their initial states in heat maps and screen path analysis.



Recommendation: Place each state of an interactive component on separate frames to create a proper flow. This approach ensures all states appear correctly in heat maps and path analysis. Connect these frames with appropriate transitions to simulate the interactive component behaviour


Overlays

Overlays will display as their own separate screen rather than appearing on top of the original frame.


  • Popup menus, modals, or tooltips set as overlays in Figma will appear as full screens in result paths and heat maps without the context of the screen they appear on.


For accurate testing of overlay interactions, consider using separate frames connected with transitions instead.


How heat maps work

Heat maps in prototype test results capture user interactions by taking a screenshot of the initial view and overlaying interaction data. Understanding how your prototype structure affects heat maps is crucial:

Fixed-Size Frames with Scrollable Content

When using fixed sized frames with scrollable content:

  • Heat maps will only show interactions visible in the initial viewport

  • Interactions with scrolled content may not appear in the correct position on the heat map visualisation

Recommendations:

  • Keep critical interactions within the initial viewport if possible

  • If you are testing interactions in a scrolled location ensure the frame height contains all the interactive content.

Pinned or Sticky Components

Pinned or sticky components (like fixed headers/footers) present special considerations:

  • Be aware that clicks on sticky components will be tracked correctly, but the location of the click may appear differently in heat maps depending on scroll position.


Prototype file permissions

Set your Figma prototype permissions to Anyone can view and can view to ensure participants are able to access your prototype to complete the test.

Note: Your Figma file can have restricted access but ensure your prototype sharing options are set correctly.

Did this answer your question?