How to use Tini's Image component

Let’s take a look at the Image component in action:
The design

As you can see, when we resize the Product Item, both the Image module and the Info module are responsive, with the Image module keeping its aspect ratio .

Note
Image with aspect ratio lock is a trick by Figma community, not officially supported by Figma.
You can check these Figma community files:
1.https://www.figma.com/community/file/885368221648804589/Aspect-Ratios (We are using this method. Big thanks to Mr. Diego Morera)
2.https://www.figma.com/community/file/873125264217713781/Fixed-aspect-ratio-in-Figma-Auto-Layout

The trick of keeping the aspect ratio

There’re many tricks to keeping the aspect ratio, but we use this one because, with that, we don’t need to understand how the trick work, we have enough material to create an image with the aspect ratio we want.

The scale unit

Let’s take a look at the smallest unit that makes this whole “keeping aspect ratio” happen.

image

The scale unit is created with auto layout and 0px frame trick, but we don’t go deeper into that, we only need to know that it scales while keeping its aspect ratio (as you can see the ratio here is 1:1). So how can we use it to create images with other aspect ratios than 1:1?

Use the scale units to create an aspect ratio lock Image component

Let’s say we need to create an image with an aspect ratio of 3:2.

3:2 image means that the width is 3 parts while the height is 2 parts, so the width will contain 3 scale units, and the height will contain 2 scale units. Easy, right?

Make each row’s width Fill Container, so when resizing the Image, the row’s width will scale along, so does 3 scale units inside, and because the scale unit maintains its aspect ratio, the whole Image maintain its aspect ratio.

The design 2

That’s it, that’s how we create the Image component with aspect ratio lock. You can use this technique to create your component or just use our Tini design system.

How to use Tini’s Image component

Tini’s Image component includes 2 options: Ratio and Scale by, we’ll take a look at each option.

1. Ratio

These are some preset aspect ratios that we regularly use every day. You can create more if you understand the trick.

2. Scale by

Scale by width

It means that you set the image’s width, and the height will scale automatically according to the aspect ratio.

Remember to scale the width, not the height.

The design 3

Scale by height

It means that you set the image’s height, and the width will scale automatically according to the aspect ratio.

Remember to scale the height, not the width.

The design 4

We use Scale by: width when the width defines the size of that design. And when height defines the size, we’ll use Scale by: height . Scale by: width is used more often because the responsive design is based on the width of the device.

Remember, if you use the Image component to create another component, always set the width to Fill Container (or height if you use Scale by height variant)

That’s it. That’s how we create the Image component and how to use Tini’s Image component.

Thank you for reading!

P/s: In order to create the Product item component as in the demonstration in the beginning of this article:

  • Create and add a placeholder fill style to the Image.
  • Adjust the Image’s border-radius to 8.
  • Add the product info.
  • Remember to set both the Image and the Info’s width to Fill Container.

The design

2 Likes