Skip to main content

Why is the responsive mode in the prototype preview so broken? When you create a page with components and layers and set them to fill mode, everything fits to 100% width or height in the design editor. This reflects typical development as expected.


However, this doesn’t work in the prototype preview. When I set the prototype to responsive, sometimes it works, sometimes it doesn’t. For instance, I have a grid with cells. Those cells are set to fill. (In fact, everything in every layer is set this way). But when the prototype renders it breaks. Those cells sometimes are 100% the available area, other times they are set to their original rendered size from the frame.


For example, the cells are set to fill and happen to measure at around 200px wide because the main container (frame) fits all the content this way in design mode. But when it goes into the prototype preview with responsive mode, sometimes those cells take up the width appropriately, other times they revert back to what they are calculated at from the original main container.


Design: g cell = fill ] (equates to ~200px or so)

Prototype: pcell = fill ] (may be 100% or may be ~200px)


Another issue, I get random fragmented lines on those cells that are not in the original styling. An artificial border that shouldn’t exist.

Hi!


It sounds like you’re experiencing issues with responsive mode in Figma prototypes. Here are a few suggestions to help resolve this:



  1. Ensure Consistency: Double-check that all components and layers are set to fill container properly in both design and prototype modes.

  2. Frame Settings: Verify that the frames containing the grids and cells are also set to responsive resizing. Sometimes, parent frame settings can affect child components.

  3. Prototype Setup: Ensure that the prototype’s device settings are correctly configured for responsive behavior.

  4. Check Constraints: Make sure all constraints (like left, right, top, bottom) are set correctly. Inconsistent constraints can lead to unexpected resizing.

  5. Update Figma: Ensure you are using the latest version of Figma, as bugs in responsive behavior might have been fixed in recent updates.

  6. Simplify Structure: Try simplifying the component structure to identify if a specific element is causing the issue.


If these steps don’t resolve the problem, consider reaching out to Figma support with your file for more specific assistance.


Good luck!

me too experiencing the problem - responsive only work with very simple frames / everything just zooms proportionally not responsive (when i have components inside site frame)

Are they behave as expected in design mode? What happens when you resize your frames?

I fixed this but NOT making the main frame with a flow a component (it was main component) - now its responsive again

Responsive prototypes are very buggy and broken for me as well. I’ll manage to get everything working properly then the next time i load the project everything is off. And I know this is entirely Figma’s fault since all it takes to fix an element is to move it and undo then it magically works again. They’ve had these bugs for years now and honestly it’s extremely frustrating and and a huge waste of time,to the point that I will likely find an alternative to Figma.

Reply


Terms & ConditionsCookie settings