How to make responsive shapes/images when setting up components

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.

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.

You didn’t understand the topic here. The request is how to make a image responsive (and now comes the most important part!) by also retaining it’s aspect ratio?
The post you referenced does not take into account the image ratio.

Im starting to think that a lot of designers don’t take that into consideration xD
I was looking at an answer to this specific problematic (keep ratio of an image while allowing the image to be in a responsive card) and i just lose my time as no solution seems to exist.

(if someone has one please tell me xD)

I feel you. I can’t believe Figma still does not provide this feature out-of-the-box, to lock aspect ratios for auto layout frames while setting them to fill.

But the Fixed aspect ratio in Figma Auto Layout Community file is exactly what you are looking for. It provides a responsive image component set with lots of options for different aspect ratios to choose from. Just copy & paste this component set in your working files and your’re all set!

I will take a look. Than you.

Hi,

I think I know what you’re looking for. Follow these simple steps to solve your problem.

1. Create a Frame of e.g. 300x0 pixel
2. Wrap it with a parent container (auto-layout). Now, the parent should have Fixed X Hug dimension, e.g. 300xhug pixel.
3. Now, the Frame’s width should fill the parent container.
4. Rotate the Frame to 34.23° for 16:9 aspect ratio.
5. Try to resize the parent horizontally.

If it works, let proceed to the next steps, like applying your Image to a Card component.

1. Wrap you Image, make sure it is auto-layout.
2. Make a content next to the Image.

I assume you have these kind of layout below:
Parent
Image
Details
Title
Description

3. Make the Image and Details to fill the container and add minimum width of at least 200px.
4. In Parent, make it wrap the content so when you resize, the content will be responsive.

See the layout I created below:

Not sure it you found an answer to this yet, but Figma added (or already had… I’m honestly not sure) a “Fit” setting to images. 

So, if you set the image to Fit and the frame to resize it will automatically resize the image and preserve the original aspect ratio within the frame.