Hi,

Some of our project workflows look like the following:

1. We import a high resolution image into Figma (eg. 3000x2000px)


2. We make a component out of it


3. We use this same component in many frames with different sizes, where the main component is scaled down and “cropped”.


4. We export each frame as an asset

The issue is that the more we downsample the component (image), the blurrier it looks when exported.

When we do the following workflow in Photoshop the downsampled images look much sharper.

1. Import image in Photoshop


2. Create a Smart Object from it


3. Resize the Smart Object either in different layers or artboadrs (and name them with image format extension)


4. File > Generate > Image assets

I suspect Figma doesn’t support bicubic interpolation (quality) and use bilinear instead (performance).

I think there should be a feature that lets user to choose interpolation method. Or perhaps make bicubic only available in the desktop app…

I’m attaching the images that have been exported from Figma and Photoshop for comparison.

I’m also a prototype in Figma with another image, so it’s easier to compare: https://www.figma.com/proto/5Eja3CgZ7uCM07UXoGrZYe/Screen-Comparison-Slider-(Community)?page-id=0%3A1&type=design&node-id=1-5&viewport=101%2C572%2C0.25&scaling=min-zoom&starting-point-node-id=1%3A5&show-proto-sidebar=1&mode=design

Am I missing something? How can I make it happen in Figma?

Thanks!

Original Image:

400px width - Photoshop

400px width - Figma

200px width - Photoshop

200px width - Figma