Add a Figma prototype to a usability test

When conducting usability tests, it can be useful to have participants interact directly with a website or prototype to get a sense for what they like or dislike, what design elements are working, or what could be improved.

To make sharing prototypes easier, you can embed links to prototypes directly in your usability tests. Then, when participants reach task questions that pertain to your prototype, the prototype will open automatically for them.

Add a prototype to a usability test

You can add a Figma prototype to a usability test at the mission level or through individual task questions. Either way, once you’ve added a prototype once, you can use it in multiple questions throughout your mission.

To add a prototype at the mission level:

1. On the Usability test tab of your mission, click the Task URLs button in the top right corner.
   
   
2. Click + Add task URL.
   
   

3. Select Figma prototype. If you haven’t already, you’ll be prompted to connect Dscout to your Figma account. For more information, see Set up the Figma integration.

   Note: If you're using a Figma Make prototype, first publish your prototype in Figma Make. Then, add the provided URL as a Website. Heat maps are not generated for Figma Make prototypes.

4. Enter the URL for your prototype. This should be the share link for your prototype, not the link to your overall Figma design file.

   Tip: We recommend setting your Figma share settings to Anyone with the link to ensure participants can access your prototype. For more helpful tips, see Preparing your Figma file for testing.
5. Click Add. Depending on the size of your prototype, the connection may take a minute or two. When the prototype is connected, you’ll see the name of your prototype and a chip indicating it is Connected.
   
   
6. Click Done.

Now, the prototype is added to your mission and you can use it when adding new task questions. Simply click Add beside Task URL, then select from the list of Previously added prototypes. For more information, see Task questions.

To add a prototype using a task question:

1. On the Usability test tab of your mission, click Add in the center of the builder or in the left sidebar.
   
   
2. Under Usability, select Task.
   
   
3. Enter the Task prompt or instructions.
4. Click Add beside Task URL.
   
   

5. Select Figma prototype. (Or, select from the list of Previously added prototypes to use one that’s already in your mission.) If you haven’t already, you’ll be prompted to connect Dscout to your Figma account. For more information, see Set up the Figma integration.

   Note: If you're using a Figma Make prototype, first publish your prototype in Figma Make. Then, add the provided URL as a Website. Heat maps are not generated for Figma Make prototypes.

6. Enter the URL for your prototype. This should be the share link for your prototype, not the link to your overall Figma design file.

   Tip: We recommend setting your Figma share settings to Anyone with the link to ensure participants can access your prototype. For more helpful tips, see Preparing your Figma file for testing.
7. Click Add. Depending on the size of your prototype, the connection may take a minute or two. When the prototype is connected, you’ll see the prototype's name and connection status.
   
   
8. Configure any other required settings for your task question. For more information, see Task questions.
9. Click Done.

Now, you’ve successfully added a prototype using a task question. The URL for this prototype will also be accessible in your entire mission so you can add it to subsequent questions if needed.

Once you’ve added your prototype, you can also select a screen where you want participants to start as well as a screen that indicates successful completion of the requested task in your prototype.

Prototype settings

Starting screen

By default, prototypes will open on the starting frame set within your Figma file. However, you can customize the starting screen for each individual task question in your usability test. So, if you use one prototype for multiple tasks, you can have each of them start on a specific screen instead of all the way at the beginning of your prototype.

To set a starting screen in a prototype:

1. Navigate to the task question where you want to set a starting screen.
2. Under Task flow, hover over the image beneath Starting screen and click Edit. The Select starting screen modal appears.
   
   
3. Use your keyboard’s arrow keys to navigate through your prototype to find the screen you want. If you want to go back to the beginning at any point, click the R key.
4. Once you’ve found the screen where you want this task question to start, click Save as starting screen. Your selected screen will now display beneath Starting screen when editing your question.
   
   
5. Click Done to save the task.

Now, when participants reach this task question, the prototype will open on your designated starting screen rather than the default starting frame of your Figma file. This helps ensure participants all begin each task on the same page—literally.

Success screen

In addition to setting a starting screen, you can also select a specific screen of your prototype that, when reached by a participant, indicates they were able to successfully complete what you asked them to do. You’ll be able to see which participants reached this success screen during analysis.

To set a success screen in a prototype:

1. Navigate to the task question where you want to set a success screen.
2. Under Task flow, click Add beneath Success screen. The Select success screen modal appears.
   
   
3. Use your keyboard’s arrow keys to navigate through your prototype to find the screen you want. If you want to go back to the beginning at any point, click the R key.
4. Once you’ve found the desired screen, click Save as success screen. Your selected screen will now display beneath Success screen when editing your question.
   
   
5. Click Done to save the task.

Now, when participants reach the success screen during the task, this data will be included in their response and you’ll be able to see it during analysis.

Scaling

Depending on what you're designs are emulating (an app or a website, for example), the size of your prototype may vary. With scaling options, you can determine how your prototype is displayed to participants. To access these settings, click the Prototype settings (gear) icon on your prototype. Then, select whether your prototype has a device frame or not:

Note: For more information on scaling options, see Figma's Play your prototype article.

Selecting Without a device frame displays the following Scaling options:

Selecting With a device frame displays the following Scaling options:

Advanced settings

Dscout offers additional prototype settings to control how your participants can interact with your designs. To access these settings, click the Prototype settings (gear) icon. Then, select whether your prototype has a device frame or not:

The following options are displayed:

Re-sync a prototype

To generate heat maps, Dscout relies on the most recently synced version of your prototype. So, if you make updates in Figma you want reflected in the heat maps generated by Dscout, you’ll need to re-sync your prototype. Re-syncing a prototype does not impact the participant experience in any way as they will always be directed to the most up-to-date version of the prototype linked in the mission.

To re-sync a prototype:

1. On the Usability test tab of your mission, click Task URLs.
   
   
2. Click the re-sync button beside the prototype. A confirmation modal is displayed.
   
   
3. Click Re-sync Figma prototype to confirm.

Now, Dscout processes your prototype again, re-syncing with the latest version for use when generating heat maps and click event data.