In Wynde you can import Figma prototypes for your research and get detailed analytics and videos of respondents' interactions with the prototypes.
In this article we'll walk you through how to add a Figma prototype to Wynde.
How to import a prototype
1. In Figma, open the file with the prototype you want to import to Wynde.
2. Set / select a starting point. Specify the initial step in your prototype. If you don't have one, you can add it to the screen using the "+" button next to Flow Starting Point in the Prototype section in the right-hand menu.
3. Make sure you have more than one screen and transitions between screens. If the prototype has no clickable elements and only one screen, you won't be able to set a target screen for the prototype block in Wynde. Target screens are screens that are considered the end goal of the user journey in the prototype; they let you determine whether users reached the intended goal or completed the assigned task.
4. Move the prototype to a separate file, leaving only one page with the prototype in it. By default, Figma loads all elements of the file containing the prototype. Since a large amount of data in the prototype is the main cause of issues for respondents, we can only import the prototype if it's moved to a separate file that contains only one page (Page) with the prototype.
5. Open the Wynde plugin from the Actions menu (⌘+K on Mac or Ctrl+K on Windows), and import the prototype following the instructions.
Copy the code you receive.
Create a Figma block and click Add prototype. Enter the code you received in the input field and click Import.
All set! Your prototype is now imported to Wynde.
What to do with the Figma block after importing the prototype
1. Write a task for respondents in the Instruction field. Respondents will see this task before they start interacting with the prototype.
2. Set up the scaling option you need for the prototype: Fit Width or Fit Screen (width and height).
By default we scale the prototype to fit the respondent's screen width. But if you want to avoid vertical scrolling, you can choose to scale the prototype to fit both width and height at the same time.
3. Set up target screens. Target screens are screens that are considered the end goal of the user journey in the prototype; they let you determine whether users reached the intended goal or completed the assigned task—when users navigate to them, Wynde marks the task as successfully completed.
Note: if the prototype has only one screen (for example, you just need to show respondents a single page), on the design side of the prototype you can add a Finish / Done button to all screens where the respondent can finish exploring the prototype. The button should lead to any other screen (you can make it just black), and when setting up the prototype block in Pathway, specify the screen the Finish button leads to as the target screen. 👐
When respondents finish exploring the prototype, they'll be able to click this button, navigate to the target screen, complete the prototype, and move on to the next task.
Additional options:
In Wynde you can set up logic based on target screens. When interaction with the prototype ends on different screens, you can ask respondents questions or request comments depending on their actions in the prototype. To do this, we recommend creating branching in the prototype logic: depending on the respondent's actions, they'll be directed to a specific final screen, and then set up the logic for displaying questions based on the final screen.
For example, if a respondent lands on final screen 1, they'll be redirected to question 2, where you can ask for a comment and clarify why they took that particular action; if they land on final screen 2, they'll go to question 3, and so on.