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.

Learn how to set up your Prototype test block

Frame setup requirements

Essential frame structure

All prototype screens must be set up as frames to be properly detected during setup and display correctly in results. Ensure your prototype follows these requirements:

Use frames for all screens: Each prototype screen must be a frame at the page level, not a component or instance
Using sections: Your frames can be wrapped inside one section, but frames within multiple nested sections will not be detected. We recommend removing sections wrapping your prototype screens.
Framing components and instances: If you have components or instances as screens in your prototype, select the screen and 'Frame selection' (⌥⌘G for Mac or Ctrl Alt G for Windows) to frame any prototype screens without detaching your instance. Ensure your prototype interactions are still correct after framing section.

This frame structure is crucial for:

Correct detection during start screen and goal screen selection
Proper display in heat maps and path analysis

Set a flow starting point

Define the first screen participants see by setting the frame as a flow starting point in your Figma prototype settings. This ensures participants begin at the intended entry point and follow the correct navigation path, reducing confusion and preventing them accidentally navigating away from the intended flow.

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’.

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 recruiting participants for mobile only it is recommended to not apply a device frame).

You can apply a mobile device frame to help desktop participants understand they're viewing a mobile interface if you are recruiting participants using any device or desktop only.

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 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.