If you have developed a prototype using Figma, you can test your design's navigation flow here on Lyssna by sharing it as a Prototype test. This allows you to gather rich data on how people engage with rich prototypes.
While similar to Navigation test sections, prototype tests will allow you to import your design from Figma, then invite participants to explore your prototype without being limited to a single, linear path. Test participants can be instructed to complete a specific task, or you can forgo tasks and give them the freedom to navigate through your prototype with limited context to see what stands out to them. Test participants can experience your designs in a more intuitive and organic way, taking any path that seems natural to them just as a real user would.
Prototype tests are also helpful for testing the navigation flow of more complex designs that may have several possible paths to complete a task. No matter which path your participants take, we'll capture and compare them all, surfacing common paths and areas where your users may get confused.
Creating a prototype test
Click +Create new test in the top right corner of your dashboard.
Add a new Prototype test section. You can rename this section to help keep large tests organized if desired.
Choose whether your prototype test will be a task flow or free flow.
Paste or type the prototype Flow link (not the prototype file link) for the prototype you’d like to test. Ensure your file's privacy settings are set to "Anyone with the link" "can view." Any other setting will prevent your prototype from loading correctly in your test as well as for your participants. More details can be found in our Prototype Troubleshooting article or in Figma's guide to sharing your prototypes.
Authenticate your Lyssna account with Figma. We'll only prompt you to do this when you add your first prototype to a test. You can revoke these permissions at any time from the Connected apps section of your account settings in Figma.
Adjust your prototype scaling if needed (for example, to avoid having part of your prototype hiding behind the header), you can choose to have your prototype shown at:
100% – Display at full size.
Fit – Scale up or down to fit.
Fill – Scale up or down to fill.
Width — Scale down to fit the width.
Add any follow-up questions you want to ask participants.
If your prototype has multiple flows, you can add as many prototype test sections in a single test as you want (and use Logic to follow up on specific versions), or alternatively, duplicate your test and run it in variation sets. You can also test prototypes from different Figma files within the same test.
Types of prototype tests
When building your prototype test, you'll have two different options to choose from: Task flow and Free flow. The option you select will depend on whether your participants are free to explore the prototype or if you require them to complete a specified task.
Task flow
Participants will be instructed to complete a task while navigating your prototype. When building a task flow, you'll need to choose a goal screen. This is the screen that participants need to reach to complete the task at hand. Click 'Pick a goal screen' to navigate through your flow and set the goal screen.
You can also specify whether or not to display a success screen to each participant when they complete the task. If the success screen is enabled, we'll display the message below when the goal screen is reached. If it's not enabled, we'll immediately display the follow-up questions instead.
Underneath the task instructions, we display an 'End task' button for participants who can't complete the task and need to give up.
Free flow
Participants are able to explore your prototype in a natural way for more open-ended research. To set up a free-flow prototype test, all you need to do is add your Figma flow link. Participants will be free to explore so instructions are optional and a goal screen won't need to be chosen.
If you add any follow-up questions, they will be presented to the participant whilst they're still interacting with the prototype. This is useful for asking comprehension questions about your designs. If you want to ask questions when they're finished exploring the prototype, add a separate questions section after your prototype test instead.
Viewing your prototype test results
How we display your results will depend on what type of prototype test you have conducted.
Task flow results
For task flows, we'll display your goal screen, along with the following metrics for those participants who reached the goal screen:
Percentage of participants that successfully reached the goal screen.
The average number of clicks (and how many of those were misclicks).
Average time to complete the task.
The exact number of participants that reached the goal screen.
Free flow results
For free flow results, we'll display a grid containing thumbnails of all the screens within your prototype's flow. Within each thumbnail, we'll display:
An image of the screen
The screen title (as set within Figma)
The number of participants that viewed that screen.
Average time spent on that screen by all participants
If you click on any screen, the green bar shown below will display the percentage of all participants that viewed the selected screen. There is a filter button available, which will only display the results of participants that visited the selected screen.
Below this grid, you can find a full preview of the selected screen, along with the option to view a click or heat map.
Paths and click maps
All prototype test results will allow you to view and compare common paths, or dig into the individual paths that each participant took through your design.
For each screen in a common/individual path, we display the title, the average time spent on that screen, and the total number of clicks. For Task flows, we'll also highlight the goal screen.
Similar to navigation test sections, we'll also share click maps and heat maps for each screen. These can be exported by clicking the download button.
Common questions
How are designs displayed to participants?
Our test-taking interface will begin with an introduction screen displaying your instructions. When participants begin the prototype test, the instructions will remain on a modal that can be moved around or minimized if needed. The starting position of the instructions can be set within the test builder.
Your prototype will appear exactly as it does if you were previewing it in Figma. Any device frames, orientation settings, or transitions will be imported into your test, so your users can experience your design exactly as you intended it. Participants' clicks will be recorded as they navigate through your prototype.
How much does it cost to test a Figma prototype?
Like all of our usability tests, the costs for your prototype will be determined by the size of your test and from where you source your participants. Smaller prototypes with a few frame transitions may only take a minute or two to navigate, while larger, more complex designs with many frames will take more time to explore. We'll automatically calculate the estimated length of your prototype while you're building your test, and display the test's estimated length before you finalize it.
It is possible to test simple prototypes on our Free plan, although Prototype tests usually tend to be longer than 2 minutes. If your test is estimated to take longer than 2 minutes to complete, you'll need to upgrade to our Basic or Pro plan to run your test. Our Pricing article provides more details on the cost of our paid plans.
Recruiting from your own audience is always free, no matter the duration of your test. You can recruit an unlimited number of your own participants by sharing your test's unique invite link with them.
Recruiting from the Lyssna panel is priced separately from our paid plans, and our price per response is dependent on the length of your test. We charge 1 credit per minute, per response recruited from our panel. More details on credits and panel costs can be found in our Pricing article, or head to our Research Panel Calculator for a cost estimate on your panel order before you build your test.
Why do I need to authenticate my Figma account with Lyssna? Won't you see all my files?
Absolutely not! We use Figma's API to connect to your prototype, and this requires authentication on their end. We do not look at files on your Figma account, and can only access the prototypes you explicitly share with us via the Flow link you provide when setting up your prototype test. You can revoke authentication at any time via the Connected apps section of your account settings in Figma:
Does Lyssna download/store a copy of my prototype?
When you share your prototype, we capture data from your Figma file along with images of your frames to accurately display your test results. These captured images are hosted securely on Amazon S3 at protected URLs. See Lyssna's Security Policy for more details on how images are secured.
I don't use Figma. Can I use another prototyping tool?
At the moment we can only support prototypes built in Figma.
Can I change the default instructions on my prototype?
Yes, you can change the default instructions for your prototype. This will let you add more specific instructions to the participants. All you need to do is toggle the option in the prototype test section and update the placeholder text to your desired instructions.
Make sure to include the information in the instructions for the task so you provide extra context to participants. These will be prominently displayed right above the general task instructions.
Getting started
We've created some additional content to help you successfully get the ball rolling on testing with your Figma prototypes: