Figma Support Forum

Bulletproof Figma usability testing / user research workflow

We use Figma’s Presentation View regularly to observe the behaviors of remote research study participants.

It lets us see what they’re doing on prototypes without having to ask them to share their screens, which is really handy for quick and easy testing – especially for the technically challenged and those who follow our directions at the last minute!

Here’s how to get it up and running

Readying the prototype

  1. Make a Figma prototype.

  2. Optimize the prototype so that it loads quickly (especially important for mobile): Remove all of the excess pages and elements that you won’t be showing to study participants. We make a duplicate of the original design file to use just for research sessions.

  3. Make sure you’re seeing what they’re seeing: Choose a device in the Prototype tab. This allows you approximate what is visible to the study participant at any given time (i.e. what’s above the fold). Without doing this step, you’d just see one long design and wouldn’t know when they’re scrolling. Note: They won’t see the device frame on their mobile device, but will see it if they open it on a desktop device.

  4. Hide unnecessary elements: In Presentation View in the Figma app (the hollow “play” icon) click the Options menu and disable “show hotspot hints on click” and “Show toolbar and footer.”

Inviting participants

  1. Get a link to share: From Presentation View in the Figma app (the hollow “play” icon) generate a link to share with study participants.

  2. Invite the participants: Send the link to participants along with just a phone number to call in to. Prepend *67 to the number if you want to block their caller ID for privacy. You could just use a phone, but if you want to invite observers and record the session then create a conference meeting and share just the dial-in part. Most video conferencing tools have this option (Zoom, Skype, Microsoft Teams, Google Meet, etc.).

Inviting observers

  1. Invite observers: Share the link to the conference meeting from the step above. We tend not to share the dial-in part because observers have to remember to mute their phone via the phone’s UI (and tend not to!).

Running the session

  1. Set up the Figma app to observe: Open your optimized prototype (see step 2), click on Presentation View (the hollow “play” icon), and wait. If you’ve invited observers, share your Figma app screen via your videoconferencing tool now.

  2. Wait for the participant to dial in via telephone (see step 6)

  3. Have participant open the link: Instruct the participant to open the Figma link in any browser on whatever device you want them to use.

  4. Observe the participant: Unless they have a Figma account, the participant will show up as an anonymous user next to you in the upper right hand corner of the Figma app (make sure you’re in Presentation View). Click on the circle to begin observing them.

  5. Double check your setup: Make sure you’re seeing what the participant does. Instruct them to scroll up and down.

Why we love this workflow

What’s awesome

• Participants and observers can use the tools they’re familiar with. No special accounts or software is necessary.

• It’s pretty bulletproof. It’s proven to be much more reliable then purpose-built research tools (UserZoom, Validately, Lookback, etc.). This is true both in terms of getting people set up and weird technical errors that are beyond anyone’s control.

• It’s lightweight. For mobile studies phone hardware and bandwidth aren’t taxed as much, resulting in fewer performance-related issues.

• Privacy. Participants can’t see that there are observers, and observers can’t see any participant information.

• You can tell what type of device they’re using. The cursor changes to indicate whether the user is on desktop or mobile (really hand when you asked them to open the link on their phone but they didn’t :slight_smile:

• You can hide Figma hotspot hinting, which has been a challenge in Figma Mirror.

Limitations

• The only thing participants can share in this workflow is an approximation of their screen and their audio. If you want to add video or be able to see other things on their screen, then do use a purpose-built research tool.

• There’s no way to hide the browser toolbar on mobile, which could be important if your prototype is a high-fidelity mobile app.

• When observing light backrounds on mobile, the cursor is invisible. Please help us get Figma to prioritize fixing this by upvoting it! Make cursors more visible when observing in "Presentation View"

An ask:

If you try this workflow, do us a solid and share your experience below. We’d love to hear what could be improved and any tips you have.

3 Likes

THANK YOU for sharing this. I am in the early days of migrating to Figma personally, and eventually an entire enterprise product design team.

We are currently using Useberry.com, which integrates with Figma/Sketch/XD prototypes and offers some really nice tools. Useberry is a new platform, so it is rapidly evolving and has some things to fix on the product usability side, but it is the best tool right now for the price. We previously used Usabilityhub, which is old and great, but not keeping up and not competing on the price.

You can try Useberry.com for free with limits. The reason I prefer it over just sharing a prototype is that we get user testing data to iterate on, and I really (REALLY) like the SUS Survey option for getting user feedback.

1 Like

Hi, I think you can have a way to hide the browser toolbar on mobile. When you open a link with mobile browser, open window options and select “Add to home screen”. Once saved as icon on your phone’s desktop, when you open this link it will hide the browser toolbar and appear as a native app.
Another thing, it could be useful to have a qr code in the desktop prototype in order to quickly open the link on the mobile device.

1 Like

Hello!
We’ve started using Figma prototypes in moderated sessions (Usertesting) and they are so sluggish on the user’s end. Even though the files only have 5 viewport-high frames, and run decently in my own computer.
Are there any guidelines to make them bulletproof performance-wise? Does it have anything to do with using libraries? Or smart-animate? Is there any option or tip to make them more performant?

@Marrrrc – here are a few pointers for optimizing prototypes, applicable for both moderated and unmoderated testing:

Optimize images before importing them.

Avoid hidden layers. “If a Component has a large number of hidden layers, a Figma file can potentially have millions of objects associated with it. This increases the risk of running out of memory.” https://help.figma.com/hc/en-us/articles/360040528173#h_590232aa-2946-4dc2-8dde-74842a80f6e1

Remove additional Pages that aren’t being tested. Make the testable prototype on just one page.

Test prototypes on different phones on mobile network via the URL (not Figma Mirror).

Enable the “Resource Use” tool to monitor what might be causing problems.

Let us know how it goes!

1 Like