I’ve been using various workarounds for years now, like many others I’m still super surprised this doesn’t exist yet — I swear I google “Figma aspect ratio” once a month just to make sure it hasn’t stealth launched without me noticing!
I did a bit of a deep-dive on the workaround techniques recently and came up with some improvements to the ‘angled line’ one some folks might be interested in (mostly making it much easier to calculate exactly the combination angles needed and removing the need to infinitely nest more spacers inside each other). Also just discovered some kinda weird interesting stuff about auto layout and rotation at the same time.
Made a write up about it here for anyone interested in a distraction while we wait for it!
Hi Matt, your article is brilliant. And is a pitty you consumed so much time researching and writing it since we are talking about such an easy and simple feature to implement for Figma’s team.
Thanks! Haha — I was aware of that before I did it, but tbh it seemed like a waste to have made this library, figured out all the things and then not share it somewhere.
Still sad though that the situation requires people like you to figure out such fiddly workarounds just because Figma is too lazy to focus on implementation of such basic features.
What is so difficult about implementing aspect ratio lock? Auto layout already works with vertical resizing… here is a javascript function that returns the sizes needed to keep an objects aspect ratio. Now just call this function when when the constrain proportions button is toggled on. What is the big deal?
<script>
function maintainAspectRatio(element) {
// Calculate the initial aspect ratio
const initialWidth = element.offsetWidth;
const initialHeight = element.offsetHeight;
const aspectRatio = initialWidth / initialHeight;
// Function to resize the element maintaining the aspect ratio
function resizeElement() {
const newWidth = element.offsetWidth;
const newHeight = newWidth / aspectRatio;
element.style.height = `${newHeight}px`;
}
// Attach the resize event listener
element.addEventListener('resize', resizeElement);
// Initialize the resizing to maintain the initial aspect ratio
resizeElement();
}
// Get the element and apply the aspect ratio maintenance
const resizableElement = document.getElementById('resizeable');
maintainAspectRatio(resizableElement);
</script>
Ran into this issue today and I was surprised that elements don’t keep their relative size even when “Constrain proportions” is turned on. Please implement this feature!
You don’t have to detach the component as there are workarounds like plugins. Probably one reason why Figma don’t see any urgency implementing this feature natively.
I dunno - “Keep the proportions locked on a thing that has specific proportions” just feels fundamental to me. I’m not making the leap to this being a feature that should be in plugin or component territory.
Is there any way that Figma will ever respond to this or a way to get them to respond? Even a, “No.” or anything? Seeing all these features shown off at Config and so little features getting crossed off these forum posts is very discouraging. Just feels like we’re yelling into the void
There is no way to lock the responsive aspect ratio of a shape or image. This is a really common requirement but really limits the effectiveness of responsive designs.
