Figma components with a fixed aspect ratio elements

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

Solo Cube
Solo Cube
Aug 3 · 5 min read
Figma components with fixed aspect ratios
Figma components with fixed aspect ratios

Before Figma Auto Layout our days were dark and full of horror. We had to create tons of components just to display different states of one and the same element. With Auto Layout 2.0 everything changed. Our buttons, lists, and cards became much easier to modify. But as always we need and wait for new features the next moment the previous update just installed…

How many of us dream about these to be added into Auto Layout?

  1. Asymmetric paddings.
  2. Negative paddings.
  3. Fixed aspect ratios.
Needed features: asymmetric paddings, negative paddings and fixed aspect ratios.
Needed features: asymmetric paddings, negative paddings and fixed aspect ratios.

And today it’s possible to achieve at least one o them…

Aspect ratio problem

The common example is a card component with a cover image, that should stretch keeping its aspect ratio when the width of the card changes, like this:

The card cover keeps its aspect ratio when resized
The card cover keeps its aspect ratio when resized

But we know that with a regular vertical Auto Layout this is not possible — the cover will just stretch horizontally keeping its height fixed:

The card cover doesn't keep its aspect ratio when resized
The card cover doesn't keep its aspect ratio when resized

The numbers of likes and comments in this Spectrum thread say that people really want this, but no answer was given and the channel was archived.

I was so tired of managing all those card components in our main project, creating new variations for all cards to support all 5 breakpoints just to have a fixed aspect ratio cover… Then we started the new project and the same problem appeared… And later it repeated in my personal project… Argh!

Solution

I've started the new thread describing this problem again and 4 months later Mr.Biscuit replied with his incredible idea of a diagonal re-sizer (check also his Figma Challenge and results achieved by its participants—that's absolutely mindblowing!).

Later I found the same concept in Figma Community posted much earlier.

Still, this was not exactly what I wanted to achieve. When I stretch the card from the inside I control only this one card at the moment. But imagine resizing a multi-column grid with lots of cards inside—editing all of them will be painful… I needed the usual behavior—the card that has flexible width and when it changes its content stretches and shrinks also keeping an aspect ratio.

However, the concept was so interesting it planted a seed of hope. I've played a bit with it, aaand… It's alive!

Card component with a fixed aspect ratio cover
Card component with a fixed aspect ratio cover

How it works

I figured out how to achieve the needed result but being honest I did not finally understand why it works…

The concept is the next:

  1. You wrap two 0-pixel objects into Auto Layout.
    The secret here is that 0.001px becomes 0px in Figma.
    Originally my colleague
    Roman Nazarenko showed me this and then a lot of our components were fulfilled with such 0-pixel frames to hack Auto Layout.
    Now we see the same in Mr.Biscuit's concept.
  2. This frame is rotated and wrapped into a vertical Auto Layout with 0 paddings.
  3. Voila!
16:10 ratio component and its layers
16:10 ratio component and its layers

Issues here:

  1. Vertical size contains subpixels: 160x100 px frame becomes 162x101.25 px—but seriously, let's neglect it.
  2. The vertical size of the proportion is limited. To achieve a fixed 1:1 ratio a one more rotated Auto Layout should be added in between. To create a taller component such as 3:4 another one needed:
Component layers
Component layers

You may notice that angles and directions of Auto Layout are chaotic. Which angle to apply and which layout to choose, horizontal or vertical? The answer is I do not know—this is the result of a few hours play tweaking angles and switching directions dozens of times.

For each new ratio I added the new cover component and placed its instances into three cards with different width. On top of them I placed semi-transparent rectangles with corresponding widths and needed ratio. Then rotated the diagonal resizer in the cover component degree by degree and then by 0.1º and even 0.01º to achieve the needed result (the Show Outline option and zoom were helpful here to match edges with the highest accuracy). This may sound a bit crazy but it was not so difficult:

Creation of the new aspect ratio component
Creation of the new aspect ratio component

For now, 12 cover components with different ratios were created, and much more may be added easily:

Image for post
Image for post

They may glitch a little while resizing but the final result is as expected, even in the multi-column grids:

All cards resized in the multi-column grid
All cards resized in the multi-column grid

I’m pretty happy with the result. This is exactly what I wanted to achieve.


🔗 Fixed aspect ratio in Figma Auto Layout

Feel free to duplicate the source file and use these components in your work.


What's next?

Figma, you're great!

However, we'll continue hacking your functionality until Auto Layout 3.0, and even after its release because this is a part of our daily creative routine!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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