If you have developed a prototype using Figma, you can test your design's navigation flow here on UsabilityHub by sharing it as a Prototype task. These tasks allow you to gather rich data on how people engage with rich prototypes.
While similar to Navigation test sections, prototype tasks 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 tasks 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.
In this article:
Creating a Prototype task
Click +Create new test in the top right corner of your dashboard.
Add a new Prototype task section.
Authenticate your UsabilityHub account with Figma. We'll only prompt you to do this when you add your first prototype task to a test. You can revoke these permissions at any time from the Connected apps section of your account settings in Figma.
Paste or type the prototype Flow link (not the prototype file link) for the prototype you’d like to test. Ensure your privacy settings are set to "Anyone with the link" "can view". Any other setting will prevent your prototype from loading correctly here in your UsabilityHub test. Figma: Share or embed your files and prototypes
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 width.
Add any follow-up questions you want to ask participants.
If your prototype has multiple flows, you can add as many prototype tasks 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 in different Figma files in a new Prototype task section.
Viewing your Prototype task results
The beauty of prototype tasks is that you aren't limited to setting a singular goal when you create your test. Test takers are able to explore your prototype in a natural way for more open-ended research, and you can measure their success on each frame of your prototype by temporarily setting an optional "goal screen". Any frame in your design can be selected as the goal or endpoint, and your results page will update to see a percentage of the success and failure rates to navigate to that chosen frame.
To set a goal screen, hover over any screen in the prototype browser above and select "Set goal screen".
For each screen in your prototype's flow, we display the title, average time spent on the screen, and the total number of clicks.
You can also select to view and compare Common paths, or dig into the Individual paths that each participant took through your design.
Similar to navigation test sections, we'll also share click maps and heatmaps for each frame in your design. These can be exported by clicking the download button.
How are designs displayed to participants?
Our test-taking interface will begin with an introduction screen displaying your instructions. When participants begin the prototype task, 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 maneuver through your prototype to complete your task. If they are confident they have carried out your instructions, they will mark the test as "Complete" and move forward to the next question. If they get confused along the way, they can choose to “Give up” and move on to your follow-up questions to provide additional feedback on the experience.
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. 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 tasks usually tend to be longer than 2 minutes. If your test is estimated to take longer than 2 minutes to complete, you'll find that an upgrade to our Basic or Pro plan may be necessary to run your test. View our pricing article for details on UsabilityHub's costs.
You can recruit an unlimited number of participants from your own audience for free by sharing your test's unique invite link with your users. UsabilityHub's panelists are available for 1 credit per minute of test length for each panelist that takes part in your test.
Why do I need to authenticate my Figma account with UsabilityHub? 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 task. You can revoke authentication at any time via the Connected apps section of your account settings in Figma:
Does UsabilityHub 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 UsabilityHub'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 are only able to support Figma prototypes, but we will be adding more integrations in the future.
We've created some additional content to help you successfully get the ball rolling on testing with your Figma prototypes: