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.
Guidelines for using long pages in Figma
Extend your frames to the length of the content, OR untick ‘clip content’.
If you have cropped frames with overflow, we also recommend that your page sections have their own fill colors rather than relying on the fill color of the parent frame. That way, when the frame image is flattened, these sections have the intended background color.
If you leave your frame content clipped, participants can still navigate your prototype as intended but your click map image will only include content above the fold of your frame.
Scaling of your prototype
The scaling of the prototype for your participants will be reflected in the study preview, which you can view at any time. We recommend checking your participant experience to make sure it is what you expect. When you preview your prototype in Figma present mode and set it to ‘actual size,’ this is the closest representation of how it will look to your participants.
Assuming you have your device type settings as ‘none’ or as ‘Presentation - Fill’:
Frame height
If your Figma frame is longer than the screen they are using, the page fold will be brought up to the bottom of their screen, and all overflow content will scroll. If the frame in Figma is shorter than their available screen space, the participant will see the frame at its actual height. The same thing will happen in your live study setup previews (‘Set correct pathway’, for example), just in a smaller space.
Frame width
If your frame is wider than the width of your participants' screens, they will have to scroll horizontally to view the overflowing content. Changing the sizing to ‘fit width’ in Figmas' present mode will not change this for your participants.
In your study setup modals (‘Set correct pathway’, for example), frames will automatically fit to width, so if you have mobile-size frames, they will scale up to fit the width of the modal window. This will not reflect the experience of your participants. If you want to check that experience, you can use the preview button to the left of the launch button.
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.