How to keep elements proportional while resizing the frame with different proportions?

I want to make a fully flexible design with smart resizing for every iPhone screen one pretty smart set for every element. Now when I want to resize the design from iPhone X to iPhone 8 and set element constraints scale I am getting not what I expected. The problem that every iPhone screen has different proportions. I want the circle to remain a circle but it turns out to be an ellipse. Do you have solutions for this?

5 Likes

The only way to keep the aspect ratio of resized elements is to use a tricky workaround.

8 Likes

You can utilize a normal frame and have it fix size and pin to the edge. Normal frames can be inside auto layouts, and you can get some pretty cool results!

1 Like

Ah, I realize that I might’ve misunderstood the original question. Another workaround I’ve done is create different sized components for the item itself. When I go to a different sized frame, I can adjust it to the appropriate size. Still a bit of a work around, but it does give some flexibility.

Just make sure your layers are named the same thing and any overrides you do will transfer between the component variants.

1 Like

This topic was automatically closed after 12 hours. New replies are no longer allowed.