Using Figma with Lookback

Figma Prototypes

Tabanitha McDaniel avatar
Written by Tabanitha McDaniel
Updated over a week ago

If you're using Figma for prototyping, there are two ways to make sure your prototype scales correctly to your participant’s device or browser window.

Building your prototype

In prototyping mode, you can select a device or set a Custom Size to fit a window. Alternately, you can select Presentation to fill a window:

Gif demonstrating how to fit or fill a screen in Prototype mode

Viewing your prototype

While viewing the prototype, you have 3 scaling options:

  1. 100% (potentially cutting off part of your design)

  2. Fit (scale down to fit any screen)

  3. Fill (scale down or up to fit any screen)

You can find those controls by hovering in the upper-right-hand of the prototype screen:

Gif demonstrating how to scale a prototype in Prototype viewing mode


Testing

If it's not already a part of your process, we strongly recommend running some tests yourself and/or with a colleague to make sure your prototype works as expected with our Participate apps before trying to run your test with participants. 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.


Troubleshooting

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.

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.


Related

Did this answer your question?