Prepare a Figma file for a Dscout study

This article outlines recommendations and best practices for preparing Figma files for unmoderated studies. While you may find some of this guidance helpful for testing Figma files in interview studies, some of the settings and recommendations outlined here will not apply.

When you link a Figma prototype in a Dscout study, all frames and pages within that file have to be loaded and processed. This might cause importing issues, or make your prototype slow to load and respond for your testers.

We highly recommend following these steps to create a dedicated and optimized testing file:

1. Create a dedicated testing file
2. Naming your frames, layers, and components
3. Set a prototype flow starting point (required)
4. Optimize your prototype (required)
5. Avoid overlapping layers and scroll frames (required)
6. Recommended prototype options
7. Mobile prototype tip - preview your mobile prototype
8. Share link settings and permissions (required)
9. Sharing your Figma Prototype (required)

Create a dedicated testing file

We highly recommend duplicating your prototype into a dedicated testing file to ensure successful loading and processing. Before adding your prototype link, exclude pages and frames that are not relevant to your test and avoid using sections unless needed for prototyping. This will create a lightweight file to improve load times and reduce errors. (Note: 100 MB is the maximum supported file size.)

You will also want to add a note to your duplicated test file stating that it is linked to a Dscout mission to prevent changes from being made to the file.

Naming your frames, layers, and components

Give your frames, layers, and components easy-to-identify names to get the most out of your prototype test. Analyzing click maps and click events is much easier with well-named layers.

Set a prototype flow starting point (required)

In order to add your prototype to Dscout, your prototype must have a flow starting point. Learn more about how to set a starting point here: Figma - Flow starting points.

Optimize your prototype

Avoid importing issues and slow loading for participants by optimizing your prototype design.

• Compress your images before uploading them to Figma. Images are not compressed automatically by Figma, and uncompressed images can lead to large file sizes.
• Convert vectors to JPG images
• Use Smart Animate sparingly
• Remove all pages from your file except for the page that contains the prototype you are using in your mission
• Limit the size and number of frames to only include the frames that are necessary for the mission

Avoid overlapping layers and scroll frames

To capture click data for the entire screen, avoid overlapping layers and placing scrolling frames on top of other frames. Double-check that any scrolling frames are cropped to match the width of their content and do not overlap other components, frames, or layers on your screen. See the example below.

Recommended prototype options

Before grabbing the link to your prototype to put into Dscout, double-check your prototype options.

• Adjust how you want participants to view your prototype:
  • For desktop, we recommend Fit width
  • For mobile, we recommend Fit width and height
• Additionally, we recommend turning on the option to hide Figma UI. This will prevent your participants from navigating to other flow starting points or paging through your screens via Figma’s navigation arrows.
• Depending on your prototype and study design, you may want to also modify the prototype options to enable Figma shortcuts and show hints on click.

Mobile prototype tip - preview your mobile prototype

Always check your mobile prototype on your mobile device before launching your mission. To do this:

• Click the “Share prototype” button in presentation mode
• Copy the prototype share link
• Paste the prototype share link into your mobile browser

Your mobile prototype will load for participants inside of a regular mobile browser window, so the browser's header and footer will still be visible. Checking the prototype on your device will help ensure that it’s behaving correctly with the browser UI present.

Share link settings and permissions (required)

Before directing participants to a Figma prototype, make sure they can access it. We recommend setting your share permissions to Anyone with the link can view in Figma. However, Dscout does support password-protected Figma files in both mobile and desktop studies.

If you are inviting your own participants, double-check your share settings to ensure those you invite can access your prototype. If you plan to share privately, make sure your participants have all been invited to view it.

Sharing your Figma prototype (required)

Now that your Figma file is ready, it is time to share your prototype with the correct settings. It is important that you copy the prototype link in Figma, rather than the file link.

1. From your design file, select Present in the toolbar.
2. Once you’re in the presentation view, click Share prototype in the toolbar.
3. From the Share prototype modal, confirm you have the correct access settings (Anyone with the link is recommended).
4. Update or confirm your prototype options.
5. From the Share prototype modal, click Copy link to copy the prototype’s URL.
6. You can now add the copied link to a task question in Dscout.

Next up: Add a Figma prototype to a study and Connecting your Figma Account with Dscout