True Aspect Ratio Lock

Another huge +1. Able to maintain aspect ratio would be super helpful for designing and prototyping responsiveness

1 Like

With the introduction of min/max sizes, aspect ratio lock would really come in handy for creating responsive designs where the element needs to remain square.

Even with the addition of the new dev mode, handoff to express that it should stay locked to an aspect ratio would be an amazing improvement!

5 Likes

Need this lock aspect ratio feature indeed!

2 Likes

Just as in shock as everyone in this thread that this feature doesn’t exist. Many personal hours have been wasted because this basic feature isn’t in Figma.

2 Likes

Bumping this thread as we need this…

Bumping this as well. Combined with min/max width + height and Auto Layout wrap a true Aspect Ratio lock could be used to better resize images in Cards

2 Likes

Same problem here. Waiting for figma’s response.

If this ever gets implemented, a minor condition I’d like to see is that, it respects pixel snapping.

For example, if a frame has a ratio of 16:9 and my box is 160x90, then changing the height to a 100 is going to result in a round width value rather than a sub-pixel value (currently, this leads to 177.78).

2 Likes

I agree, but I’d like that to be optional if needed

1 Like

Do you think it should inherit that behavior if the user already has Snap to Pixel on, or do you it should be a separate option altogether?

Personally, if I already have Snap to Pixel on, I would expect aspect ratios to respect that too; but I’m curious on your take.

My thought is that if we get percentage based values combined with Auto Layout something like rounding to nearest full pixel could interfere with that resulting in unprecise layouting.
I expect to be able to utilize Auto Layout exactly like things work in the web with css, which means sometimes you have decimal places when working with percentage or viewport based values.

Snap to Pixel just refers to how things behave when you move them on the design canvas.
What you mean could possibly be a different feature (something like a checkbox or setting sitting near the aspect lock “round to full pixel”).

1 Like

:notes: w h e r e is a s p e c t ratio looooooock :notes:

2 Likes

please implement such a feature!

Yes, please consider this, @Figma. Now with Auto-Layout getting even more useful with each update, why do we still have to use weird components for simply having a dynamically scaling image with a true aspect ratio lock. And the components even provide only a certain number of fixed ratios… I mean, yeah, it works and I like clever engineering, but you could also simplify this whole thing a lot, couldn’t you? 8-)…

Ugh seriously come on Figma!!! I am trying to make a video player component and the video thumbnail needs to stay the same proportion when resized. I cannot for the life of me find a way to do this.

For a while now to support a responsive layout grid, we’ve had to make image components with 1 variant for every width of column spans across the breakpoints we target. Since we’ve settled on 4 ratios for images and videos, this demands A LOT of variants that are the same thing repeated.

If however, we could utilize true fixed ratios with variables and min-max settings—these could be reduced to single components. Actually with enough variables they could even be one component. Situations like hero images could benefit from ratios switching at different container widths.

Also, ratio lock could be especially useful if it could be defined like 2:1 and 16:9 in addition to being arbitrary.

4 Likes

Adding a comment to keep this thread alive. Been asking for this update for… years. This is such a common design paradigm, I’m unclear on why this hasn’t been added yet. Hopefully soon!

2 Likes

Please make this happen :pray: :pray: :pray: I was as surprised as everyone that there is no ability to lock a frame’s aspect ratio once the rollout for min/max attribute was added. I have a navigation component that is used across various brands. The logo image component must be variable with maximum width and height restrictions. A square 1:1 logo image component that’s larger than a frame’s maximum height either exceeds that frames height or is clipped depending on if I switch the frame’s autolayout from Fill to Hug. I can’t do anything to make it scale proportionally except for detaching the navigation component itself, which is not ideal since all brands will the the same navigation component… :sob:

Beside a tricky workaround called : “Fixed aspect ratio in Figma Auto Layout (Community)”. There’s no actual way to implement a proportional image (auto-layout, artboard) resize while keeping the object aspect ratio.

It would be nice to add on top of “hug”, “fill”, “fixed” a proportional version of fill with constrained aspect ratio.

This would ease design implementation and limit the number of needed components to deliver all the different size variations. I know, it’s been posted already a while back and many times.

It also makes sense on a development point of view, as we use these techniques all the time on actual websites.

1 Like

This is something that would make it easier creating complex components for our design system. Big up!