Bulletproof Figma usability testing / user research workflow

General Discussion
1

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.

7 Likes
2

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
3

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.

3 Likes
4

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?

5

@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!

2 Likes
6

If you need a quick way to optimize images pre-Figma, check out https://squoosh.app. Faster than most tools, works really well to compress images, and provides multiple output formats.

7

Hi. Is there a video tutorial on this? Would love to try this out.

8

I tried more or less the same thing; having users open the prototype and share their screen in a Zoom meeting. It mostly worked, but I couldn’t see their cursor or touch points, and their screen stopped sharing if their phone screen turned off due to inactivity (about 30 seconds, though that was only one person). Next time I’m going to share my screen and have them tell me how they want to interact with the prototype. I’m hoping that will also improve the narration of their thought processes.

On a side note, I also tried Useberry for one study. On the plus side, it did offer a lot of useful data. On the down side, they can’t record audio (at the time of my study), and I couldn’t use prototypes that use Beta features (those components/features displayed, but were completely inactive).

9

The purpose of this workflow is to avoid screen sharing issues like you had. If you follow the steps above, you’ll be watching the participant’s behavior through Figma, not through screen share. Cursor visibility is still an issue. On desktop it’s better than mobile – you could run a mobile prototype as a desktop session, but then you lose the reality how people use it.

Feel free to add a like/comments to the issue of cursor visibility here: We’ve contacted Figma a few times and been told they’ll “put it in the backlog…”

10

No, sorry. That would be great if someone would make one!

11

Hi! Thanks for sharing the workflow, it seems like a great way to test your prototypes!

However, I can imagine, it takes a lot of work and time to follow all those steps for each test:)

I’ve recently discovered a life-saving tool to test my Figma designs.

UXtweak has launched this feature a couple of month ago and it’s literally a must-have for anyone who uses Figma. I love how easy it is, you just share a link to your Prototype during the set up and that’s it. A nice way to avoid all those numerous steps you mentioned:)

They are FREE by the way, so make sure to check them out. It really helped me a lot with Figma prototype testing

12

Sorry so late to the conversation, but I am struggling to get my stakeholders on board with accessing a prototype. You mention choosing the option, “Show toolbar and footer,” but I’m not seeing it (I do see “show hotspot hints…”). I am on Android, they are on both Android and iOS.

I had a long gap between my last use of Figma and prototyping, but I have the latest download from the Play Store.

No one seems able to access the preliminary file I shared, but I have a feeling that is user error on my part (still checking on that).

The main issue is giving them an experience of the app on their respective phones.

Thanks in advance for your help, and for posting this great breakdown!

13

my team and the research recipient like the prototype. But anyhow the prototype editor can control the hotspot hink for other?

i.e.
when I share prototype link to my testers, they can view the hotspot hint. Unless they manually disable it from the menu. Is there a way the editor can set it hide by default and not be able to enable by testers or other who access the link?

14

Thanks for the tip Daria Krasovskaya, Content Manager at UXtweak. Maybe nice to mention you work for the company whose “life-saving” product you are recommending? :wink:

15

Has anyone tested Figma prototypes via unmoderated testing on UserZoom?
i’m considering it for an upcoming study because we’re interested in seeing how users would naturally engage with the prototype without having a moderator there. It seems we’ll need a number of different unique URL’s for each page in the prototype in order for the test to work. Curious to hear if anyone has any experience doing this and what it was like!

16

I disabled “show hotspot hints on click” and “Show toolbar and footer.” But the link I get has [&hotspot-hints=1&hide-ui=0] at the end. which could be manually edited who has the link and can have access to the file in editor.

How can I avoid my file being visible to anyone except the presentation