How to make responsive shapes/images when setting up components

One of the last remaining pain points that I encounter in most of my projects when trying to set up components to be responsive across devices, is needing to be able to define a fixed aspect ratio for responsive images.

For example say I’m creating an instagram or youtube feed where the images/videos are 1x1 or 16x9, It would be great if we could lock the image layers aspect ratio to that. Unfortunately in the current state there is no way to have those images retain their aspect ratio’s on a responsive screen by using the fill property or left and right constraints, it would be amazing if responsive components respected a locked aspect ratio (or something similar) on shape/image layers so image/video heavy designs could be more accurately responsive.

Hey @Nicholas_Lavis1 - I may have misunderstood your feedback, so please correct me if that’s the case.

I think there’s an existing thread that may address some what you’re looking for here: Making a component responsive

Hi @ksn unfortunately no that thread isn’t referring to the same issue.

In the solution video [re-posted below] see how the image DOES NOT maintain it’s original aspect ratio, this is fine in a lot of cases, but what Im suggesting is that it would be really powerful to allow us to lock an image’s aspect ratio in responsive components (So in this example the image would remain what looks like 16:9 as it responds).

Hopefully that makes sense, as I think this would be a very common pain point. As right now creating responsive screens for an app like youtube or instagram with images and videos that have a fixed aspect ratio as I originally mentioned currently isn’t possible.

responsive card

1 Like

Hi, this is the one that i want to do. How to do this? Like tha image is adjusting

Hey @Francis6, check out this Help Center article which shows step by step on how to Create a responsive card with auto layout and constraints. Also, if you want to learn more about Auto layout feel free to check out our auto layout playground community file.

Please let me know if this helps and if you have any further questions.