How to prepare and troubleshoot your Figma prototype for Prototype Testing?
Before you import your Figma prototype into UXtweak's Prototype Testing, it's good to make sure that everything in your prototype is in the right order and has been properly adjusted to accomodate testing. Read further to learn how to import Figma prototypes efficiently and decrease the load times of your prototype for your respondents.
Get your prototype ready for import
Before you start preparing your Figma prototype for testing, we recommend that you make a copy of your prototype that will be used in testing. That way, you will keep the original even if you make adjustments specific to testing.
Your prototype should be made up from Frames. UXtweak converts individual frames on the top level into designs in Prototype Testing. All components of a design should be included inside a Frame. There shouldn't be any elements left outside Frames, or UXtweak may not interpret them as you would expect.
If your Figma file is made up of multiple Pages, make sure to note down the name of the page you would like to import. You will be asked to do so in the import process.
How to get link to the Figma prototype that I can import?
Click the Share button and make sure that Anyone with a link can view your prototype.
Then click Copy link.
If your company prohibits public sharing of prototypes, you need to follow these steps to import your prototype:
- Prototype is set in Figma to “only people invited to this file can access”
- Log in to the Figma account, which is the owner of the Prototype in the same browser window as you have your Prototype Testing study setup opened in. These two email addresses must be the same:
Optimize your prototype
If your prototype takes longer than a minute to import, you should consider the below steps to optimize your prototype for import. These modification will make your prototype import faster during study setup, as well as load efficiently for your respondents. Quick loading helps avoid frustration. More respondents will be willing to participate if you're respectful to their download volume (some may be using limited data plans).
- Trim unnecessary content from your prototype. Get rid of Frames, Pages, and other elements which aren't part of your testing and aren't going to be seen by respondents. A bloated prototype file may take unreasonably long to import and not open for some respondents at all.
- Minimize your prototype. The more Frames, Pages and other elements your prototype has, the longer it will take to import. With huge prototypes, reconsider reorganizing your testing, by scaling down into multiple studies with smaller prototype files.
- Reduce the size of images. Images are one of the main culprits of bloated prototype files. Figma doesn't do image compression by itself, so before you upload an image into Figma, you should make sure it isn't in unnecessarily large resolution. If you need to insert large photos, consider using JPEG instead of PNG.
Troubleshooting
Below you can find some of the most frequent cases, which can happen, and how to address them.
Check for proper sharing of the prototype
When start importing your Figma prototype into your Prototype Testing study, the first step which will take place is “Checking your prototype”:
If the import is interrupted in this step, your prototype is most likely not shared properly.
The link to your figma prototype is always structured as follows: https://www.figma.com/proto/{PrototypeID}/{queryparameters}.
There are two checks to confirm your prototype is shared properly. Both of these checks require opening an incognito or similar window in your browser:
- Check number 1: take the link of your prototype and delete the query parameters portion. If this edited link will load and the query parameters are automatically added back, then your prototype is shared properly. If not, then your link is most likely not publicly shared.
- Check number 2: take the link of your prototype and exchange the /proto/ portion of the URL for /design/. If this can be accessed, it most likely means that your prototype is shared with the option “can view prototype” instead of “can view” .
Password protected prototype
If you include a password in your prototype on Figma, it shouldn’t influence the import in any way. However, you would need to put in the password to preview the prototype on the Designs tab or in the preview mode.
The participants will need to put in the password during their participation as well. If they are using Chrome browser and never opened a Figma website on that browser before, they might need to do so in a separate tab, to agree to Figma cookies. This case can be easily identified by the participants not being able to put in the password in the Figma modal.
It means the prototype is set to “only people invited to this file can access” and you are logged in a Figma account, which is not the owner of the prototype. To finish the import, you will need to switch your Figma account to the account, which is the owner of the prototype.
Library components
Components imported in the Figma file from a design library are just a shallow copy from the library and aren't included with all structure sections of the element. In this case only variant names are imported instead of the full variant children, which are necessary to properly track the interactions in the setup of paths and recording of the interactions. As a solution we suggest copying the component into the same file and creating instances of this deep copy instead of the instances from the library version of the component.
Errors during prototype import
If you encounter any errors during this portion of the import, when the designs are loaded:
Please contact our support team to help you.