Contents
Figma is an excellent tool for prototyping, and when combined with Lookback, it becomes a powerful solution for conducting usability tests.
To ensure your prototype works seamlessly during testing, follow these best practices.
Build your prototype with Auto-Layout
With participants using a wide variety of devices, it’s crucial to ensure your prototype adapts to different screen sizes. Figma’s Auto-Layout feature helps your design dynamically adjust to fit any screen, preventing elements from being cut off or misaligned on smaller devices.
🚀 Even if you design using Figma’s device presets for specific screen dimensions, Figma does not account for the space occupied by the device’s status bar or browser controls. As a result, your design may still appear cut off despite using the correct dimensions. Auto-Layout helps mitigate this issue by ensuring your design remains flexible and responsive across all devices.
Why Auto-Layout Matters:
Ensures your prototype displays correctly across all devices.
Eliminates issues caused by fixed dimensions that may not match participants’ screen sizes.
Learn More About Auto-Layout:
Figma - Add auto layout to a design
Figma - Explore auto layout properties
Set your presentation to "Responsive"
When sharing your prototype, ensure you select the Responsive option from the dropdown menu in Figma. This setting allows your design to scale dynamically, ensuring it fits perfectly on the participant’s device screen and delivers a consistent experience.
To verify this, preview the prototype in your browser—it should resize seamlessly as you adjust and resize the browser window.
Test your prototype using the shareable link
Before starting your usability test, always test your prototype using the shareable link. If you're testing on mobile, be sure to test in the device's native browser (Safari on iOS; Chrome on Android) before testing in Lookback.
Testing in the native browser ensures that your prototype displays correctly, as Lookback’s in-app browser relies on the same technology. If the prototype works well in the native browser, it should function seamlessly during the session in Lookback.
Here’s how:
Preview your prototype
Click Share Prototype in the top right hand corner
Click Copy Link in the pop up
Open the link in the native browser of the device you’ll be testing on. This simulates how your participant will experience the prototype.
For plans that are session-limited (Trial, Freelance, Team, Insights Hub), you can use our Preview Links to test without using up any of your live/full sessions.
Add the prototype link to your usability study
To add the prototype to your study, paste the shareable link into the Auto-open URL section of your test. This section is located under Test Setup > Instructions in the Round Editor. The Auto-open URL feature is available for LiveShare, SelfTest, and Tasks rounds, ensuring your prototype launches automatically when the session begins.
🚀 Changes made to the prototype during a session will update in real-time. Participants won’t need to refresh their screens to see the updates.
By following these guidelines, you can ensure a smooth and effective usability testing experience with Figma and Lookback. Happy researching! 🚀
Troubleshooting
Prototype runs slowly or crashes
You may find that when trying to use a Figma prototype in a Lookback session, you run into some issues:
The prototype loads/runs slowly or keeps refreshing as it's trying to load
The prototype crashes and/or the Participate app crashes while the prototype is running
The prototype seems to load, but their connection is unstable (they keep disconnecting)
Typically, the main reason for this is that Figma prototypes can be very resource intensive meaning some devices may not be powerful enough to run the prototype, even without using Lookback. This is usually only a problem with older devices and/or ones with lower device specifications.
Scenario 1: The prototype won't run in Lookback's Participate app
If you have issues while running your prototype in Lookback's in-app browser, try having the participant copy the link to the prototype, pasting it in the device's native browser (iOS - Safari; Android - Chrome), and running it that way. If it does work better in the device's browser, we can still record everything on their screen so long as the Participate app is still running in the background.
Scenario 2: The prototype runs ok in the device's browser without Lookback running, but if we try to run the prototype in the browser while Participate is running in the background, we encounter issues
Again, due to Figma prototypes being resource intensive, it may be that the device is just barely powerful enough to run the prototype on it's own. However, when you run Lookback at the same time as the prototype running in the browser, you're now adding audio & video streaming and screen recording to the device's tasks. In such cases, it may end up overwhelming the device causing instability and/or connectivity issues.
Additional Troubleshooting Tips
Ensure the frame size matches the target device’s screen size and that constraints are set correctly.
Enable auto-layout in Figma and test in different browser window sizes with the weblink.
You can find more tips at Figma's Help Center:
Still need help?
If you still have questions or run into issues, please reach out to our support team via the chat bubble to the right or emailing support@lookback.io.