Preparing your file for importing
To reduce the loading time of the Figma prototype and provide the best participant experience, we recommend you follow the following guidelines:
Create a separate Figma file for testing designs and prototypes. If you have set up a prototype flow, ensure all the necessary frames and flows are correct before importing. We recommend you test this using the preview option in Figma.
Remove any elements and pages not required for testing, as this can slow down the Figma file's loading times.
Ensure all the page names are clear and accurate to help with task setup and reporting.
Figma will not compress images, so we recommend compressing them before importing them to Figma. If you are using images that include photographic elements, we recommend using a JPG.
Use interactive components to reduce the number of frames required, which will reduce Figma's loading times. We recommend storing interactive components on a separate page in Figma to reduce bloat when the pages are uploaded to Optimal.
For the best experience for your participants, ensure all your frames have a consistent width.
Include no more than 60 frames per file, if there are any more in the file these will not upload.
Guidelines for long frames in Figma
Option 1: Extend your frames to the length of the content and set a custom height for your prototype to display at. In your prototype tab in Figma, open the prototype settings and click on the device dropdown.
Here, you can set a custom height that your frames should crop at, you’ll be able to see your changes to the height in the prototype preview. Using this approach will fix the issue for areas where you see an interactive version of your prototype (the preview, setting correct pathways, and participant experience), it will not change how the frames are seen in thumbnails. If you need the thumbnails to also be cropped, use option 2.
Option 2: Shorten your frames and enable vertical scrolling. Shorten your frames to the height you would like them to display at and clip the content. With this option, all instances of your frames will be clipped to height, including thumbnails in setup and when viewing paths in analysis, BUT, but, your clickmaps will only show up to where the page is clipped. If your participants have clicked beneath the fold of the frame, these clicks will not be visible on your clickmap. We only suggest this option if you must have cropped versions of your pages in thumbnails, this is why we recommend naming your frames effectively so that you know what content is on each frame.
Selecting a device type to test
If you set a specific device type for viewing your prototype, the experience in Figma's present mode will mirror what your participants see. Ensure that all your frames match the width of the chosen device; for example, if your frames are 1440px wide, select a device with that width to ensure they fill the entire screen.
If you do choose to view your prototype on a device, when you are in setup this might affect how much of your prototype you can see. This is because, in the preview windows fit width still applies, but the height of the device you set is locked in. If the device is taller than the modal window then you might not be able to scroll the whole way to the bottom of your page.
If you want participants to view your prototype inside a device, set the device type in Figma present mode AFTER finishing the setup.