Some of our project workflows look like the following:
- We import a high resolution image into Figma (eg. 3000x2000px)
- We make a component out of it
- We use this same component in many frames with different sizes, where the main component is scaled down and “cropped”.
- 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.
- Import image in Photoshop
- Create a Smart Object from it
- Resize the Smart Object either in different layers or artboadrs (and name them with image format extension)
- 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?
400px width - Photoshop
400px width - Figma
200px width - Photoshop
200px width - Figma