Skip to main content

[BUG] Lock Aspect Ratio + Responsive Prototype View

Lachlan.K

Hi,

When creating a webpage, adding images with Aspect Ratio Lock enabled, applying them to ‘fill’ the container they are in, then previewing the prototype in Responsive View (Z) cuts off the bottom half of the prototype.
 

Steps to reproduce:

  1. Create a new webpage design in Figma. Example: 1920 wide
  2. Add images with Aspect Ratio Lock enabled.
  3. Set the images to Fill the container they are placed in.
  4. Preview the prototype and swap to Responsive View (Z shortcut)
     

Expected Result:
The full prototype should display correctly in responsive view.
 

Actual Result:
The bottom half of the prototype is cut off in responsive view.
 

Notes:

  • I am on a Mac Studio Display (2560px wide) + the main frame is 1920px wide.
  • This issue appears to happen consistently when the frame is smaller than the resolution it’s being scaled to in Responsive View. (1920px frame scaling up to 2560px)
  • Moving the browser width inwards allows more of the full website to show.
  • I use responsive images daily, and my current work around is to include a giant empty frame at the bottom of my design, but this is not ideal for showing stakeholders on different devices.

 

Working Example:

 

2 replies

y_toku
Figmate
  • y_toku
  • Community Support
  • 2544 replies
  • June 6, 2025

Hi there,

Thanks for reaching out about this. Let me make sure I understand your question correctly - are you looking to display your entire prototype on screen at once?

The "Responsive" option works differently - it actually resizes your frame to match the dimensions of the viewing window, which might not show your entire prototype content if the proportions don't match.

Please let me know if I've misunderstood your question or if you're trying to achieve something different!

 

Thanks!

Toku

Lachlan.K
  • Lachlan.K
  • Author
  • New Member
  • 1 reply
  • June 6, 2025

Hi Toku,

 

Thanks for your reply.

 

I'm trying to display my prototype in Responsive View to clients to show how their website may look as it scales up or down.

Notice the pink footer — it's cut off when I switch to Responsive View. This issue occurs because the grey boxes (which are images) have Aspect Ratio Lock enabled.

 

If I disable Aspect Ratio Lock, the footer displays correctly. However, the images (grey boxes) become distorted and stretched. I'm aware they're set to "fill" — that's intentional, as I want the images to scale responsively with the screen. But without Aspect Ratio Lock enabled, they don’t maintain their proportions.

 

I've attached two GIFs to demonstrate this:

  • Aspect-Ratio-Enabled.gif: Aspect Ratio Lock is enabled — the footer is cut off.

  • Aspect-Ratio-Disabled.gif: Aspect Ratio Lock is disabled — the footer displays properly, but the grey boxes are stretched out of proportion.

This clearly shows the at Aspect Ratio Lock causes unintended behaviour in Responsive View.

Hopefully that helps showcase the issue.

 

Thanks,

Lachlan

2 Attachments

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings