Set up the Figma integration

Related to:

Figma usability

With Dscout’s Figma integration, you can take your usability tests to the next level by letting your participants interact directly with your design concepts and prototypes. The integration also allows Dscout to collect click event data and generate heat maps you can use during analysis.

Note: It is possible to add prototypes to usability tests without the Figma integration. However, analysis won’t include click event data or heat maps.

Requirements

To use the Figma integration, you’ll need:

  • A Figma account.
  • Access to the Figma files you want to use in Dscout missions.
Note: The Figma integration is enabled on the user level rather than the account level. This means individual teammates can choose to connect to Figma or disconnect at any time.

Connect Dscout to Figma

You can connect Dscout to your Figma account from within your profile settings or directly within the builder when creating an Express usability test.

Tip: Connect Dscout to Figma before adding prototypes to your missions. If you’ve already added prototypes, be sure to re-sync them once you’ve connected to Figma to collect click event data and generate heat maps. For more information, see Re-sync a prototype.

To connect to Figma from your profile settings:

  1. On the Profile settings page, click Integrations in the left sidebar.
  2. Under Figma, click Connect Figma account.

  3. Log in to your Figma account, granting Dscout access when prompted.

Now, you’re returned to your profile settings where you’ll see a Connected badge letting you know the integration was successfully enabled. Next, add a prototype to a usability test! For more information, see Add a prototype to a usability test.

To connect to Figma from within an Express usability test:

  1. Navigate to the Usability test tab of your Express mission.
  2. Click Task URLs at the top of the builder. The Manage Task URLs modal is displayed.

  3. Click Manage Figma integration.

  4. Click Connect Figma.

  5. Log in to your Figma account, granting Dscout access when prompted.

Now, you’re returned to your usability test where you’ll see a Connected badge letting you know the integration was successfully enabled. Next, add a prototype to a usability test! For more information, see Add a prototype to a usability test.

Disconnect Dscout from Figma

If you wish to disconnect Dscout and your Figma account, you can do so at any time from either your profile settings or from within an Express usability test.

Note: Any prototypes added prior to disconnecting your Figma account will remain connected, meaning they will still collect click event data and generate heat maps. If you wish to disconnect these prototypes, you can delete them from your missions individually.

To disconnect Figma from your profile settings:

  1. On the Profile settings page, click Integrations in the left sidebar.
  2. Under Figma, click Disconnect Figma account. A confirmation modal is displayed.

  3. Click Disconnect to confirm.

Now, Dscout is no longer connected to your Figma account. You can reconnect at any time by repeating the process above.

To disconnect Figma from within an Express usability test:

  1. Navigate to the Usability test tab of your Express mission.
  2. Click Task URLs at the top of the builder. The Manage Task URLs modal is displayed.

  3. Click Manage Figma integration.

  4. Click Disconnect Figma. A confirmation modal is displayed.

  5. Click Disconnect to confirm.

Now, Dscout is no longer connected to your Figma account. You can reconnect at any time by repeating the process above.

Was this article helpful?

3 out of 6 found this helpful
Have more questions? Submit a request

Articles in this section