True Aspect Ratio Lock

Also adding a big +1 to this.

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! :crossed_fingers:

2 Likes

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. :exploding_head:

2 Likes

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.

2 Likes

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.

2 Likes

+1 Still need this 2 years later

4 Likes

What is so impossible 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>