Prototype displays well in Figma mirror and desktop but not mobile browser

Ask the community
1

Hello,
My prototype is displaying all content on Figma mirror and desktop browser but when I use my mobile browser to display the it parts of the prototype is cut off and I can’t view it on my mobile browser which is also what most people use to view the prototype.

I removed the device, changed the viewing options, nothing works. I can’t test because the tab bar is important for the testing and it’s not being displayed.

1 Like
2

If your prototype displays well in Figma Mirror and on desktop but not in a mobile browser, there are a few potential reasons and troubleshooting steps you can take:

  1. Browser compatibility: Different web browsers may interpret and render web pages differently, especially on mobile devices. Make sure that you are testing your prototype on commonly used mobile browsers, such as Chrome, Safari, Firefox, and Edge, to ensure compatibility. It’s also important to check if the version of the mobile browser you are using is supported by Figma.
  2. Responsive design: Figma allows you to create responsive designs that adapt to different screen sizes, but it’s important to ensure that your prototype is designed to be responsive and mobile-friendly. Double-check that you have created appropriate responsive design components and layouts in Figma to ensure that your prototype displays correctly on mobile browsers.
  3. Device viewport settings: Mobile browsers use viewport settings to determine how web pages are displayed on different devices. Make sure that you have defined appropriate viewport settings in the HTML code of your prototype to ensure that it displays correctly on mobile browsers. Viewport settings include attributes such as width, initial-scale, and user-scalable, which can affect how the prototype is rendered on mobile devices.
  4. Image and asset optimization: Large image or asset files may take longer to load on mobile devices and can affect the overall performance and display of your prototype. Optimize your images and assets for mobile devices by compressing images, using appropriate file formats, and reducing file sizes to ensure faster loading times and smooth display on mobile browsers.
  5. Check for errors: Review your prototype in Figma for any errors or issues, such as missing or misaligned elements, overlapping layers, or incorrect component settings. Fix any issues that you find to ensure that your prototype displays correctly on mobile browsers.
  6. Test on actual devices: While Figma Mirror provides a close representation of how your prototype may look on a mobile device, it’s always best to test your prototype on actual mobile devices to accurately assess its performance and display. Test your prototype on different mobile devices, including smartphones and tablets, to identify any specific issues and make necessary adjustments.

If you have tried the above troubleshooting steps and your prototype still does not display correctly on mobile browsers, it may be helpful to seek further assistance from the Figma community or support channels for specific guidance on how to resolve the issue.

1 Like
3

hey thank you for your prompt response i tried viewing this with other prototypes including ones i didn’t work on and the problem persists, it’s like if the element is fixed on a part of the frame as long as that part is outside of the device frame it won’t show up, for now I have set the tabbar to scrollable so we can at least test the app

1 Like
4

Hi there. I was wondering if you ever got this issue resolved. My team is experiencing something very similar where we’ve programmed a frame to stick to the bottom of a set of screens. It works perfectly in mirror mode, but not on browser.

5

Hi, Unfortunately i couldn’t so i had to reduce the screensize until the fixed content could be viewed as such I could only test for iOS. I’m still not sure why this is happening as it wasn’t an issue with figma before.

6

Hi, I’m encountering a similar issue. In the iOS (v16.5) mobile browsers (Safari, Firefox), in the prototype - sticky footer at the bottom of the screen isn’t displaying. If anyone has a solution or workaround, I’d appreciate it if you could share. Thank you

1 Like
7

I’m having an issue where the toolbar for my app only appears on some pages but not others. I can’t find any factors that are different between the different pages.

Particularly the Identity, Galleries, and News pages

8

I have the same issue, except it has rendered the prototype almost unusable. If I open it in Firefox half my borders show, half don’t, labels are missing randomly, I end up with partially colored backgrounds, and weird half-renders on form fields. It’s extremely hit-and-miss.

If I open on a Chrome browser none of my borders render, background colors are missing, etc. That includes form fields, tooltips, product selections, etc.

If I open on the Samsung browser on my phone everything renders okay, but it makes random pre-selection throughout the flow, which isn’t ideal. Same for Safari.

I’ve checked all components for errors and issues, I’ve created new links, I’ve moved the prototypes, nothing seems to work. We’re supposed to be testing these flows this week and aren’t able to. Many of these components are being pulled from our design system library where they’re used in many other parts of our ecosystem, so I’m really concerned this issue is going to compound.

Has anyone found a resolution?

9

Hey, I seem to have the same issue here. Did you ever find a solution by any chance?

Our prototype looks and behaves perfectly fine on any Desktop browser. I should mention it also works flawlessly on multiple iOS smartphones. However on Android the design seems completely broken, similar to how you’re describing it, with missing borders, half-missing fills on shapes, etc.

What’s even weirder is that all looks absolutely fine in the Android version of Figma Mirror.

This is also a major blocker for the testing we’re meant to kick off this week. Any help would be greatly appreciated.

1 Like
10

My Figma prototype was running properly on my Desktop as well as Chrome, but it was not working properly on my VCs machine Chrome. Is there any particular reason for that? How to solve this issue?

11

Hi!

My prototype is working fine on my computer and on my phone (android), but it is not working fine on IOS. I have scrollable pages and on IPhone I cannot scroll…
Does anyone know how this can be resolved?

12

Hey @Anissa, apologies if this is impacting your work!

Can you please confirm is your device is running on iOS 16 or later?

For mobile performance issues please try the following steps:

  • Checking the impact of interactive components with variants Because the presentation view currently loads all variants in a set, not just those used in a specific transition, using large variants sets for interactive components uses a lot of available memory. We’d suggest creating a set with only the states needed for a specific transition or disabling interactive components as needed.
  • Removing hidden layers: Loading and then hiding many layers, especially in components or with images stored in them, can cause a high use of available memory on loading.
  • Removing stacked masks and effects like shadows and blurs also take a lot of memory to load.
  • Downsizing large images: You can check the size you’ve added an image to a File at by temporarily toggling the Image Fill settings to ‘Tile 100%’. If the preview you see is much larger than the Frame it’s filling, we’d suggest toggling this setting back, and then exporting the Frame and replacing the Fill with that export. You can also optimise image size in bulk using a plugin.
  • For frames, turn clipping on if possible

If this doesn’t help, I’d suggest you to reach out directly to the support team by filling this form here: https://help.figma.com/hc/en-us/requests/new 1. Be sure to use your Figma account email and please also share your file link here with support-share@figma.com invited directly as an editor (this won’t affect your billing at all).