How to create a Component that maintains their Aspect Ratio in Figma

Visit the Fixed Aspect Ratio in Auto Layout community page and open the project.

In the Components page, copy the relevant aspect ratio variant within the the Fixed-aspect-ratio-spacer component.

In your Figma design file, create a new component (and variants) that use auto layout and which include the variant of the Fixed-aspect-ratio-spacer component variant.

Make sure that the components horizontal and vertical resizing are set to hug, and include a minimum width to make sure that the visual maintains some level of consistency.

Make sure all the children within the component, including the Fixed-aspect-ratio-spacer component variant, use auto layout with the horizontal resizing set to Fill and the vertical resizing set to Hug.

Make a copy of the component and resize it using the handles on the sides.

If you use the corners, make sure you set the vertical resizing to Hug to guarantee that the component maintains a height that correctly renders the children.

Select the element and under fill, click the square.

In the window that appears, click choose image.

A file browser window will appear that will allow you to pick an image to apply to the Fixed-aspect-ratio-spacer component variant.

Consult the guide below to learn how to create designs that adapt the typography as the screen or component changes size.

We recommend you check out our Responsive Design Figma Guide or search our blog to find educational content on learning how to use Figma.