How to View a Figma Prototype on Your Phone

The way to view a Figma prototype on your phone is the free Figma app for iPhone or Android, where you sign in, find the file under Recent or Search, tap it and choose View prototypes from its menu, because the link opened in your phone’s browser works too but only lets you tap the hotspots, keeps the address bar on screen and does not support the browser’s back action, which is why Figma’s own guide to viewing prototypes on a mobile device recommends the app. I design the mobile screens of every website next to the desktop ones, and I think the phone is really where an owner should review them, since that is where a lot of your visitors will meet the site.

This post goes through both ways of opening the link, the few settings which your designer controls, and what I would look at once the prototype is in your hand.

What your designer sets before you open it

A prototype is a set of linked screens in a Figma file, and the designer decides how it starts and how it fits on a screen, so a few things which you might expect to change on the phone are fixed before the link reaches you.

• The device and the orientation. The designer chooses the device, the model and Portrait or Landscape in the prototype’s device settings, and the prototype keeps that orientation when you turn the phone.
• The flows. A file can hold several starting points, such as Home and Contact, which Figma calls flows, and each one is a separate path through the screens.
• Who can open the link. When the file is shared with Anyone, people with the link can view the prototype in a browser without an account, while the app always needs a Figma account. Figma’s guide to sharing files and prototypes covers these settings, and a company on an Organization or Enterprise plan can switch public links off for all its files, in which case your designer needs to invite your email address instead.

Viewing and commenting cost nothing, since Figma’s seat guide describes the free View seat as one which can view and comment across its products.

How to view a Figma prototype in the mobile app

1. Install the app and sign in

The Figma app is on the App Store and on Google Play, and you sign in with the same email address which your designer invited, so the file appears in your account. A free account is enough.

2. Find the file

Open the Recent tab, or the Search tab if the file is not there yet, and tap the file which your designer shared.

3. Open View prototypes

Tap the file’s menu and choose View prototypes, and the prototype plays full screen, where you move through it by tapping the buttons and links which the designer has connected, the same way as on a real website.

4. Use the hidden menu

While the prototype plays, the controls are out of sight, and Figma’s current guide to the mobile app opens them when you press and hold the screen with two fingers. From that menu you can Switch between flow starting points, Toggle hotspot hints, which outlines everything that you can tap, and Turn comments on and off, and Figma’s guide to commenting on prototypes confirms that you can comment on a prototype from the mobile app, so you can leave a note on the exact screen where something feels wrong.

How to view a prototype in your phone’s browser

If you would rather not install anything, tap the prototype link in an email or a message and it opens in Safari or Chrome. It works for a quick look, but you can only interact through the hotspots, the browser’s address bar takes some of the screen and may stop some actions, as Figma’s system requirements page notes, and the back gesture of the browser does not step back through the prototype. So I would use the browser to check that the link works, and the app to review the design properly.

The phone needs a connection the whole time, because Figma does not play prototypes offline on mobile.

What to look at on a phone

A prototype on a phone shows things which the desktop review mostly hides, so these are the parts which I would go through with your thumb rather than your eyes.

• Whether the main button on each screen is easy to reach and to read without zooming.
• Whether the menu opens and closes the way you expect, and whether every item in it leads somewhere.
• Whether long sections scroll where you would expect them to, and whether the header stays on screen when it should.
• Whether the text size and the line length feel comfortable to read on the bus, and not only at a desk.
• Whether any screen leaves you guessing what to tap next, which is when hotspot hints help.

Each comment should then say what you expected and what happened, and my post on how to comment in Figma goes through writing them so the designer can act on each one without a call.

When a video works better

On one project this month the people reviewing the design did not use Figma at all, and they read the screens as exported PDFs, which show no taps, no menus opening and no hover states. So for each interaction which they asked to see, I built a short video of it in Figma, once at desktop size and once at phone size, and sent the files with the round of changes. I think it’s a good habit for any review where the people who decide are busy, since a video plays on any phone in a message thread and needs no account at all, while the prototype stays the place for the closer look.

Figma’s Mirror is the designer’s version of this, which shows the frame selected on the desktop live on the phone, but it needs edit access, so it mostly suits a review where you sit next to the designer.

Where to start

Before your next design review, install the Figma app, sign in with the email address which your designer has, and ask them for the prototype link and the name of the flow to start from. Then open it in the app, press and hold with two fingers to find the menu, turn on hotspot hints once to see what is connected, and leave your notes as comments on the screens where they belong, adding annotations to your list of things to read if the designer has written behaviour notes beside the frames.

Frequently asked questions

Can I view a Figma prototype without an account?

Yes, in a browser, when the designer shares the file or prototype with Anyone, and the Figma app always needs an account, which is free for viewing and commenting.

Why can’t I rotate the prototype on my phone?

The designer sets the orientation in the prototype’s device settings, and Figma does not switch between Portrait and Landscape inside a prototype, so the prototype keeps the orientation which the designer chose when you turn the phone.

Why does nothing happen when I tap?

Only the parts which the designer has connected respond, so turn on hotspot hints from the app’s menu to see them outlined, and mention any button which looks tappable but is not in a comment, since that is mostly a link which still needs to be connected.

Can I comment on a Figma prototype from my phone?

Yes, Figma says that you can comment on prototypes from the mobile app once you are signed in with view access or more, and on the phone I would keep each note short and attached to the screen which it is about.

Does a Figma prototype work offline?

No, Figma does not play prototypes offline on mobile, so the phone needs Wi-Fi or mobile data while you review.