When using Figma prototypes with Ballpark, it's worth knowing about some of the challenges you may face when sending your test to a wide range of devices, with participants across the globe.
Ballpark directly embeds Figma files into your survey or test so we're at the mercy of the various performance issues that large files will encounter when loading in the browser.
Fortunately, you can avoid these issues by following the tips below.
Be aware: When viewing a prototype, Figma loads the entire file, regardless if you are just sharing a prototype link containing a few screens.
⏳ Figma tip #1
Copy only the things you need for your test to a separate, smaller Figma file.
It's normal for a Figma file to have tons of content within it. This naturally will add to the loading time for your participants. It can also potentially cause timeouts in Ballpark when building your step and for the participant.
The solution is to create a new, clean file and copy just the frames and elements you need in your prototype.
Check out the recommendations by Figma.
🖼 Figma tip #2
Compress large images using free tools and plugins
If your Figma prototype contains large photos or images, we highly recommend compressing them first.
Large images, especially at retina sizes, will take a significant amount of the overall loading time of your prototype.
The good news is that there are several free services to help compress your images:
- TinyCompress - compress JPEGS and PNGs
- ImageOptim - an app for Mac that quickly compresses images (we use this at Ballpark)
- Figma plugins - there are several Figma plugins that will compress images directly in the app
🔴 Figma tip #3
If a Figma file takes a long time to load or play when you're designing, it will also take a long time to load for participants (or time out) when they are testing
It's no surprise that designs and prototypes can get huge, and that impacts the time it takes for the browser to process and download the file before being able to display it.
A good way to experience this before testing is simply to check how your design file or prototype performs for you on desktop and mobile browsers.
You can also try throttling your browser to put yourself in the shoes of participants who have slow connections or devices.
💻 Figma tip #4
Check whether Figma supports the devices your participants may have
Figma is not supported across every type of browser or device. Make sure you check their help article on the browser requirements to use Figma prototypes.
👨👦👦 Figma tip #5
Check if Figma is down using their status page
Sometimes some or all of Figma or the Figma API may be experiencing an outage. That will obviously cause issues for your participants, so check their status page to see if any issues are being worked on.
💻 Figma tip #6
The amount of RAM or CPU will impact the performance for your participants
Older or lower-end devices are slower to handle Figma files and prototypes. This is especially apparent on mobile, where iOS will simply decide to not load a Figma prototype if there is not enough RAM available.
The solution is the same as above, optimise, optimise and optimise.
🔐 Figma tip #7
You have private permissions on your source file for the prototype
If you are on the Figma organisation or Enterprise plan, you made have restrictive permissions on the source file for the prototype.
This means that even if the prototype allows public viewers to access it, Ballpark will not be able to pull the underlying information from Figma due to the restrictions.
The solution is to either copy the frames into a new file without restrictions on it and use that as the link or change the source file permissions to be public.
Finally, remember to test, test and test again before sending prototype tasks your participants. Avoid testing giant files where possible.
Use the tools within browsers to throttle your connection speed and put yourself in the shoes of the participant when testing your own Ballpark project.