Figma components with a fixed aspect ratio elements

Keep an aspect ratio of a nested element when resizing its parent.

Figma components with fixed aspect ratios
Figma components with fixed aspect ratios
Needed features: asymmetric paddings, negative paddings and fixed aspect ratios.
Needed features: asymmetric paddings, negative paddings and fixed aspect ratios.

Aspect ratio problem

The card cover keeps its aspect ratio when resized
The card cover keeps its aspect ratio when resized
Expected result.
The card cover doesn't keep its aspect ratio when resized
The card cover doesn't keep its aspect ratio when resized
Actual result.

Solution

Card component with a fixed aspect ratio cover
Card component with a fixed aspect ratio cover
Screen recording made directly in Figma.

How it works

The concept is the next:

16:10 ratio component and its layers
16:10 ratio component and its layers

Issues here:

Component layers
Component layers
Creation of the new aspect ratio component
Creation of the new aspect ratio component
Image for post
Image for post
All Figma components.
All cards resized in the multi-column grid
All cards resized in the multi-column grid

🔗 Fixed aspect ratio in Figma Auto Layout

What's next?

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store