Right now, it is not possible to make a square frame that resizes via parent frame. It always distorts into a rectangle.
Even with “constrain proportions” toggle selected, it does not constrain the proportions. To make matters even worse, the toggle only “works” when changing the numeric fields of height/width, which then breaks snap-to-pixel-grid. But then when holding shift and dragging a corner of the frame, it constrains proportions and maintains the snap-to-pixel grid functionality.
I believe a toggle/option in the constraints panel (example: width = fill container, height = maintain proportions) could do the trick.
OMG I can’t believe this. This is like the 3rd major missing feature I’ve encountered in the last 30 minutes in Figma. Might need to go back to XD. At least the basics are there.
The expected behavior for the “Constrain Proportions” option will only affect the size of the object when changing the number values found on the Design Panel.
If you want to proportionally scale an object by mouse dragging, the best option would be to hold Shift while dragging it.
To be fair, we hear you and completely agree that this isn’t clear from the UI. Rest-assured, our team is aware of this issue, and we’re tracking this in our backlog already. We hope to have better timeline on fix in the future.
if I hold down a shift key while recizing a circle using a mouse, the circle will not grow from its center. I have to hold down the Alt key to grow a circle from its center, but the Alt key does not constraint an object when recizing it using a mouse.
So please, make Figma do what hundereds of software packages do already. Make the ‘chainlink’ toggle to truly constrain an object on which it is set. The ‘constrained’ behavior of resized objects should be the same regardless of a recize method, using a mouse or typing numbers into text boxes.
I’m trying to make a video player component with some variant for aspect ration and I’m frustrated by the fact that instances don’t have and option to:
Edit constraints on instances
Chain H and W when instances is set to: Fill, HUG or FIX
Adding any of those would fix the issue but so would including a “Fit” option the the size drop downs.
While this is true for regular frames and auto layouts it definitly does’t work with component instances as the button does not even appear in the UI for those.
Agreed completely. Coming from Adobe XD, the way it worked there was a no-brainer. Figma is a great and powerful tool, but quite often, the UX is so poor, with so many bizarre and unintuitive choices that puzzle users greatly, like this case - when I lock proportions, I expect this to work universally, not expecting it to only work for manual number entries - in no way this is a clear expectation.
I also am struggling with this. I want to anchor an image in the bottom right of a column grid, but have the image shrink proportionally with the column widths when I shrink the width of the frame. If I use a fill set to fit, I can get it to scale proportionally, but I can’t get it to stay anchored at the bottom. I’ve also tried content in frames set to fill, scale, and constrain left and right and top and bottom. I have not yet found any solutions that work and agree the constrain proportions chain tool does not work as expected and is making a simple task extremely frustrating. Holding down shift does work, but that isn’t an option when testing layouts for responsive design.
The big problem here is that when we have a component with autolayout variables and the variants change the size, the content does not fit proportionally because that is only done manually. There has to be a way where the scale is proportional for the variants to work and adapt to the part that contains them
We need this feature desperately - the whole of app design is moving towards web-based, and “aspect-ratio” has been a supported feature in CSS for years now - why can’t we have locked aspect ratios?
Agreed - this is so annoying. I have an icon that I want to scale with the parent frame. The parent frame could be any size or aspect ratio depending on context, hence the icon is getting stretched or squashed despite me enabling “constrain proportions” in the component.
If “constrain proportions” is only for a specific limited application, then why isn’t this referenced in the Figma UI itself? Like, the tooltip doesn’t give you any clue other than the name of the feature…
When I create a square box (500x500px) and then click CONSTRAIN PROPORTIONS, and then drag the square nodes to the right. The constrain proportions does not respect the ratio. It just drags like a not box.
The fact that Sketch has been able to do this forever, and now we have min/max heights, it’s laughable that Figma can’t do this. Give us proper scaling, and aspect ratios.
This is a separate issue from size constraints. It sounds like you’re talking about frame constraints. If you’re not seeing the frame constraints as an option, you probably have auto layout applied to the frame. It’s not possible to use both auto layout and contstraints.
