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 Make a Figma prototype. 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. 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. 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 Get a link to share: From Presentation View in the Figma app (the hollow “play” icon) generate a link to share with study participants. 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 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 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. Wait for the participant to dial in via telephone (see step 6) Have participant open the link: Instruct the participant to open the Figma link in any browser on whatever device you want them to use. 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. 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 🙂 • 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.

Question

Bulletproof Figma usability testing / user research workflow

Forum|Forum|5 years ago
January 26, 2021
15 replies
7419 views

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

Make a Figma prototype.
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.
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.
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

Get a link to share: From Presentation View in the Figma app (the hollow “play” icon) generate a link to share with study participants.
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

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

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.
Wait for the participant to dial in via telephone (see step 6)
Have participant open the link: Instruct the participant to open the Figma link in any browser on whatever device you want them to use.
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.
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 🙂

• 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.

This topic has been closed for replies.

Show previous replies

Penina

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!

JohnnyWoo

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?

Patrick_Rushton

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? 😉

Grace_Zec

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!

rutuja

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

Here’s how to get it up and running

Why we love this workflow

An ask:

Sign up

Login with SSO

Login to the community

Login with SSO