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.
