LAUNCHED: True Aspect Ratio Lock

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.

+1 Still need this 2 years later

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>

Taking bets on this not being part of any config announcements. How this wasn’t in scope as part of Auto Layout 1.0 is crazy

Let’s hope Figma can cross this basic feature off in 2024.

+1, aspect ratio is already a widely supported CSS property.

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!