Skip to main content
Question

Downsampled image export quality issues (lack of better interpolation?)

  • June 23, 2023
  • 1 reply
  • 400 views

Elespacio_Comunicacion_Visual

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
Fruit_Photoshop_200

200px width - Figma
Fruit_Figma_200

This topic has been closed for comments

1 reply

  • 0 replies
  • July 23, 2023

This topic was automatically closed after 30 days. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings