On this page
Quick steps
Set the device
On desktop, deselect everything, press Shift+E for the Prototype tab, and pick a device preset that matches your frames. You can also set orientation and a background colour.
Check the flow starting point
The mobile app starts from the flow's starting point. Make sure it's on the first screen.
Open it on the phone
In the Figma mobile app, go to View prototypes and pick the file. Or copy the prototype link and open it in the phone's browser.
Fix the scaling
Double-tap and hold to open the options menu, then switch scaling between Fixed and Responsive until the screens fit.
Use Mirror while you design
Select a top-level frame on desktop and open Mirror on the phone. The app shows that frame scaled to the device width.
Three ways to open a Figma prototype on mobile
- Figma mobile app, View prototypes. Plays the prototype from the flow's starting point. Good for testing touch interactions like While pressing, which becomes tap and hold on mobile.
- Prototype link in a mobile browser. Share the link and open it in Safari or Chrome. Anyone with access can view it without installing the app.
- Mirror. Select a top-level frame on desktop and the app shows it scaled to the device width. It needs edit access to the file and the same login on both devices. It also works at figma.com/mirror in a mobile browser.
Mirror shows the frame you have selected, not the whole prototype. Use it to check type sizes and tap targets while you design, and use View prototypes to test the flow.
Why is my Figma prototype zoomed in on mobile?
The scaling setting doesn't match the phone. Double-tap and hold anywhere to open the options menu. From there you can switch flow, restart, show hints, change scaling between Fixed and Responsive, and share. Try Responsive first if the frame is a different width from the phone.
Also check the frame size. A 1440 px desktop frame will always look tiny or cropped on a phone. Design mobile screens at a mobile width and pick a matching device.
How to change the Figma prototype device
Click an empty spot on the canvas so nothing is selected, then open the Prototype tab. The device settings only show with nothing selected. Pick a preset, Custom Size (Fit), or Presentation (Full). Set orientation, model and background colour here too. When a device is set, the presentation options include "Show device frame", which draws the phone around your screens on desktop. That helps when you present a mobile prototype on a laptop. It works on any plan, but you need edit access to the file.
How to fit a prototype to screen on all devices
"Fit to screen on all devices" has about 20.3k views on the Figma forum. On desktop, press Z while presenting to cycle the scale options: Fit width, Actual size, Fit width and height, Fill screen and Responsive. On a phone, use the Fixed or Responsive setting in the options menu.
| Action | Mac | Windows |
|---|---|---|
| Cycle scale options while presenting | MacZ | WindowsZ |
| Present in a new tab | Mac⌘⌥↩ | WindowsCtrlAltEnter |
| Restart the prototype | MacR | WindowsR |
Figma prototype not working on mobile
- Back doesn't work. "Using the browser back action isn't supported on mobile devices." Add a Back button with the Back action in your screens.
- Videos don't play. Video in prototypes isn't supported in the Figma mobile app. Test video in a browser instead. See video in Figma prototypes.
- The link won't open. Check the link access in Share. If it's set to Only invited people, the viewer needs an invite.
- Mirror shows nothing. Mirror needs a top-level frame selected on desktop, edit access, and the same Figma account logged in on both devices.
For desktop-side fixes such as frames not showing or greyed-out triggers, see Figma prototype not working. The basics of building the prototype are in how to prototype in Figma.
Ranked listBest Figma mockup plugins for devices and printFrequently asked questions
How do I view a Figma prototype on my phone?
Open the Figma mobile app and go to View prototypes, or open the prototype link in your phone's browser. Mirror, in the app or at figma.com/mirror, shows the frame selected on desktop.
Why is my Figma prototype zoomed in on my phone?
The scaling doesn't fit the device. Double-tap and hold to open the options menu and switch between Fixed and Responsive. Also make sure the frames are designed at a mobile width.
How do I change the device in a Figma prototype?
Deselect everything, open the Prototype tab, and choose a device preset, Custom Size or Presentation. You need edit access to the file.
Why doesn't the back button work in my prototype on mobile?
Figma doesn't support the browser back action on mobile devices. Add your own back button with the Back action.
More in Prototyping
- How to Make Flow Arrows in FigmaFigma Design has no connector tool, but you can still draw flow arrows that stick to frames. The native options, the FigJam copy trick, and plugins, explained.
- Why Is "Fixed" Greyed Out in My Figma Prototype?Fixed (stay in place) is disabled when the layer sits in an auto layout frame. Turn on Ignore auto layout or remove auto layout, then set the layer to Fixed.
- Figma Prototype Not Working? Why It Happens and How to Fix ItMost broken Figma prototypes come down to structure: designs outside frames, frames with no connections, nested targets. Fix On click, After delay and more.
- How to Add a Hover Effect in FigmaMake Default and Hover variants, connect them with While hovering, Change to and Smart animate. Plus why Figma hover states stick or don't fire, and the fix.
- How to Make a Frame Scroll in a Figma PrototypeFigma scrolling only works when content is bigger than the frame. Set Overflow, clip the content, and fix horizontal, vertical and Scroll to that won't work.
- How to Make a Prototype in FigmaPress Shift+E, drag the + from a layer to a frame, and pick a trigger, action and animation. How to add overlays, flows and share a Figma prototype link.
- How to Animate in Figma with Smart AnimateSmart animate tweens layers with matching names between two frames. What it animates, what it skips, and why Figma Smart animate isn't working for you.
- How to Add Video to a Figma PrototypePlace an MP4, MOV or WebM up to 300MB with Shift+Cmd+K. Which plans can upload video, how GIFs play in Figma prototypes, and what to do about sound.
- How to make a GIF in FigmaMake a GIF in Figma from frames with a plugin, export a Figma Motion animation as GIF, or record a prototype. Steps, loop and timing settings, and trade-offs.
- How to Make a Skeleton Loader in FigmaHow to design a skeleton loader in Figma: grey blocks with auto layout, a component with variants, a Smart Animate shimmer, and a plugin that converts frames.
- Figma Frame Sizes: Which Preset to Pick and How to Change ItPick a Figma frame size from the Phone, Tablet, Desktop or Paper presets, change an existing frame's size, and why you design at viewport size, not resolution.
- How to Toggle a Boolean Variable to Show and Hide Layers in FigmaBind a boolean variable to layer visibility, then toggle it on click with Set variable and a not expression. Plus why boolean variables stop working in Figma.