How to Import Your Prototype
01 In Figma, open the file containing the prototype you want to import into Wynde.
02 Set or choose the starting point.
Specify the initial step in your prototype. If it doesn’t exist, you can add it using the "+" button next to Flow Starting Point in the Prototype section on the right-hand menu.
03 Ensure there is more than one screen and that there are transitions between screens.
If the prototype lacks clickable elements and only has one screen, you won’t be able to set a target screen for the prototype block in Wynde. Target screens are the endpoints of the user’s path in the prototype; they help determine if users have reached the intended goal or completed the assigned task.
04 Move the prototype to a separate file, leaving only one page with the prototype.
By default, Figma loads all elements of the file containing the prototype. Since a large amount of data in the prototype can cause issues for respondents, we can only import the prototype if it’s in a separate file with only one page containing the prototype.
05 Get the prototype link and paste it into the Figma block in Wynde.
Add the Figma block to the test, click Add Prototype and connect your Fgma account to Wynde. Then paste the copied link into the Figma block within your test in Wynde, then click Import. If there’s an error, you’ll see a warning message.
All set! Your prototype is now imported into Wynde.
Where to Get the Prototype Link
To import a prototype, follow these steps:
Open the prototype preview page by launching a Flow you need to import.
Click the Share prototype button.
In the window that opens, set the permission to Anyone with the link and select can view.
Click the Copy link button.
☝ It's very important not to delete this prototype or change access settings, as this can cause errors for testers or result in data loss in the report.
What to Do with the Figma Block After Importing
Vital Steps:
01 Write a task for testers in the Instruction field.
Testers will see this task before starting the prototype.
02 Set the prototype scaling option — Fit Width or Fit Screen.
By default, we scale the prototype to the width of testers’ screen. However, if you want to avoid vertical scrolling, you can choose to scale the prototype by both width and height simultaneously (Fit Screen).
03 Set goal screens.
Goal screens are the endpoints of the user’s path in the prototype; they help determine if users have reached the intended goal and completed the task. When users reach these screens, our system marks the task as successfully completed.
Additional Steps:
01 You can set up logic for the goal screens. You can ask testers additional questions or ask for feedback depending on the goal screen they got to.
We recommend creating branching logic in the prototype. Depending on testers’ actions, they will be directed to a specific final screen, and you can then set up logic to display questions based on that screen.
For example, if a tester reaches goal screen 1, they will be directed to question 2, where you can ask for a comment and clarify why they performed that action. If they reach final screen 2, they will be directed to question 3, and so on.
02 Video recording for the Figma block.
Enabling screen recording for respondents allows capturing their interactions with the prototype screens. You can read a bit more about recording Figma sessions in this article.
03 Show only the standard cursor.
This setting disables the cursor from turning into a pointer when hovered over clickable elements, so testers cannot guess which elements in the prototype are clickable.