> For the complete documentation index, see [llms.txt](https://help.dscout.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dscout.com/study-basics/testing-prototypes/prepare-a-figma-file-for-a-dscout-study.md).

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

{% hint style="info" %}
**Note:** The guidance in this article applies to traditional Figma prototypes. It does not apply to prototypes created with Figma Make. To test a **Figma Make** **prototype** in Dscout, first [publish](https://help.figma.com/hc/en-us/articles/31304586129559-Publish-update-or-unpublish-a-functional-prototype-or-web-app) the prototype in Figma Make. Then, add the provided URL as a **Website** in your task question.
{% endhint %}

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:

## Create a dedicated testing file

We highly recommend [duplicating](https://help.figma.com/hc/en-us/articles/360038511533) 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.

{% hint style="info" %}
**Note:** 100 MB is the maximum supported file size.
{% endhint %}

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.

![](/files/cc6ea12eed4c753a8bfd44b7baad3616e60387c1)

## 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](https://help.figma.com/hc/en-us/articles/360039823894-Create-and-manage-prototype-flows#h_01HNZT1ATPZP0EAWCQH90CXE42).

![](/files/a90d03b9400702b8bbf4dae849ced5d7f04c9774)

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

![](/files/c021d67349d704689241db1a6a7b903836d91930)

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

![](/files/60bbf5f7d833951408255613bb5bbb16d1d32f0f)

![](/files/d6ad1c0949ff311b06a54c3be239bdfbbd5fc284)

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

{% hint style="success" %}
**Tip:** When testing a password protected Figma file, be sure to include the password in the prompt of the related question in your study so users can access it when needed.
{% endhint %}

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.

![](/files/743364fa973303495a7ce26ffa085418f257c262)

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

{% stepper %}
{% step %}
From your design file, select **Present** in the toolbar.
{% endstep %}

{% step %}
Once you’re in the presentation view, click **Share prototype** in the toolbar.
{% endstep %}

{% step %}
From the Share prototype modal, confirm you have the correct access settings (Anyone with the link is recommended).
{% endstep %}

{% step %}
Update or confirm your prototype options.
{% endstep %}

{% step %}
From the Share prototype modal, click **Copy link** to copy the prototype’s URL.
{% endstep %}

{% step %}
You can now add the copied link to a task question in Dscout.
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.dscout.com/study-basics/testing-prototypes/prepare-a-figma-file-for-a-dscout-study.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.