For an effortless and successful start to testing with prototypes, we recommend you take steps to optimize your Figma prototype for the best performance before linking it to a Lyssna test. Here are some tips to help you get the best start when you import your Figma prototype into a prototype test.
Using Figma Flows
Each Figma file can contain multiple separate "Flows". A Flow in Figma is a particular set of interconnected screens or frames. We ask for a Flow link rather than the link to your Figma file to ensure we are connecting only to the specific flow you’d like to test.
There are two main ways to ensure you copy the right link for the Flow you want to test.
From Editor view:
Click Prototype on the right sidebar.
Navigate to the Flows section.
Click the link 🔗 icon to copy the Flow link to your clipboard.
From Presentation view:
Select the flow you want to share from the left sidebar.
Click Share prototype in the toolbar.
Click 🔗 Copy link to copy the Flow link to your clipboard.
Privacy settings must be public on your flow in Figma
For Lyssna to be able to show the prototype and track the clicks and path through the flow, privacy settings must be set to “Anyone with the link” → "can view" in Figma before you can add it to your prototype test. Your prototype will not load here on Lyssna if any other privacy settings are selected. Figma's guide to sharing your prototypes can help you get this set up.
Changing your start screen
Unfortunately, you cannot change your prototype's start screen here in your Lyssna test. If you'd like to designate a new start point for your prototype, you'll need to change your Flow start screen in Figma. Figma's guide to moving your starting point can assist you with this change.
Add your device frame in Figma, not on your Lyssna test
If you’d like to show a device in your test—for example, an iPhone frame—you can set this up in Figma. Device frames that are configured in Figma are automatically shown here on your Lyssna test. You can read more about Figma's device frames and appearance settings here.
Change the background color
While you're checking out your prototype's appearance settings, you may want to adjust its background color for best results. Your prototype will have a background color around the outside of your design, which you can customize in Figma. We recommend a neutral color like black, white, or grey.
Other considerations to optimize your prototype for testing
We recommend duplicating only the flow you’re testing into a new file before uploading it into the test builder. Some Figma files can be really large, we’ve all been there. Even if the flow you want to test is only a few screens, if the file it belongs to is very large, it will increase the time it takes us to render and import each frame, which leads to a very slow test-taking experience for participants. Therefore we have set a limit for the amount of “nodes” you can import (different frames, elements, etc. in your Figma file) at 200 screens and a maximum file size of 64MB to reduce the risk of performance issues.
What we don't yet support
We can’t currently show clicks in a Figma frame with overlays or overscroll behavior. While users will still be able to interact with your prototype, clicks within these frames will appear to be missing from your results. You will still see clicks that occur in the main frame.
We also don't support Interactive components or variables at this time.
We plan to introduce support for these in the future as we continuously improve our prototype testing feature.
Got another question about your prototype? Check out Prototype test sections or our article on Troubleshooting prototype tests.