When you link a Figma prototype in dscout, 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 to screen” 
• Additionally, we recommend turning off the option to show 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: disable default keyboard navigation and show hotspot 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)

To ensure that your participants will be able to see and interact with your Figma prototype, it’s important to check your prototype share settings before including the prototype link in dscout.  The recommended share setting for your prototype is: Anyone with the link can view. 

If you are recruiting your participants from the dscout pool, your prototype must be set to either:

• Anyone with the link can view (recommended)
• Anyone with the link and password can view*: If your prototype is password protected, be sure to include the password in the task prompt so that users can access your prototype. *This setting is only available for desktop usability missions, mobile desktop missions do not currently support private prototype links (we recommend you set a password after you mission is complete so scouts can't return to it).

If you are inviting your own participants, double-check your share settings to ensure that they 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: Adding a Figma Prototype to a Usability Mission and Connecting your Figma Account with dscout