Figma doesn't have a built-in feature to set constraints for frames to support specific aspect ratios like 4:3 or 16:9. But I found a way to get around this limitation.
Here's what you need to do:
- Create two frames. The outer frame will be the image container, while the inner frame will be responsible for keeping the desired aspect ratio.
- Set the outer frame's width to either
fillorfixedand its height tohug. - For the inner frame, set its width to
filland its height to 0, essentially making it invisible. - Now, rotate the inner frame by a specific angle based on the aspect ratio you want.
You can calculate this angle using the formula:
angle = arctan(height/width)
For instance, if you're aiming for a 4:3 aspect ratio, the calculation would be:
angle = arctan(3/4) = 36.87°
Here's the table of aspect ratios and their corresponding angles:
| Aspect Ratio | Angle |
|---|---|
| 1:1 | 45° |
| 3:2 | 33.69° |
| 4:3 | 36.87° |
| 16:9 | 29.36° |
| 2:3 | 56.31° |
| 3:4 | 53.13° |
| 9:16 | 60.64° |
Why this works?
This is likely due to a bug (or perhaps a feature?) in Figma. The bug is that if you rotate a frame inside of an auto layout, its width will be set to the width of the outer container, even if it's rotated.
When you change the width of the image (outer) container, you also change the width of the inner container, which changes the height of the inner frame, which in turn changes the height of the outer frame. The magnitude of the change is determined by the angle.