LAUNCHED: True Aspect Ratio Lock

Great concept! Is the icon below the lock for rounding to full pixels?

Is the icon below the lock for rounding to full pixels?

Exactly – was just a quick shot to illustrate the functionality.

This deserves a medal 🏅

I’m 99% certain Figma is not implementing this now just to spite someone.

Coming from XD, this is also one of my biggest pain points.

PLEASE make the “maintain proportions” actually maintain the proportions.
It is resize a group that contains multiple icons.

I have been asking for this four years. I continue to be dumbfounded that community doesn’t have its pitchforks and torches out rioting for this to be implemented. It’s just such a rudimentary and basic element of web design, I can’t understand how this hasn’t been prioritized.

I really like how Webflow solved this:

+1 This is needed so bad.

This feature would’ve been far more useful for more people than Modes.

+1 need this

+1 this is really needed

The feature just seems broken

+1 Still waiting for this feature 3 years later

The year is 2049. Figma’s built in AI designs entire worlds near instantly. True Aspect Ratio Lock is still on the calendar as TBD.

Mindblowing we are still waiting for this. I find the need of this feature again and again and again. It is funny I can create such a complex design but not locking an aspect ratio in an image. Seriously, it is completely absurd.

What are the odds we will see this fixed at Config? It would be great if Figma fixed this very basic feature before adding advanced features like “code connect” etc

💯💯💯💯💯💯💯💯 absolutely agree

+1 This is such an essential feature. I would have needed this so many times already. Please implement it 🙏

I have been requesting this feature for 3+ years now. Adding a comment to support this thread and hopefully get some more exposure

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! 🤞

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>