Why Is My Figma Export Blurry, and How Do I Fix It?

1. You exported at 1x

Figma has no DPI field. Every raster export is 72 DPI multiplied by the scale: 1x is 72, 2x is 144, 3x is 216. A 390px wide phone frame exported at 1x is a 390px wide PNG. High-density screens, like most phones, use two or three device pixels for each CSS pixel, so that PNG gets stretched on screen and looks fuzzy.

Fix: export at 2x for anything viewed on a screen, and 3x or 4x if people will zoom in, crop it, or put it in a slide deck. If you need a set pixel size rather than a multiplier, type a width (1600w) or height (1200h) in the scale field.

2. The image inside the design is too small

Scale only helps vector layers and text. A photo you placed has a fixed number of pixels, and Figma scales anything over 4096 x 4096 down so its longest side is 4096px when you place it. If you then stretch that photo across a large frame, or export a small photo at 4x, Figma has no extra detail to add.

Fix: place a source image that is at least as large as the final export in pixels. For a 1440px frame exported at 2x, a full-width photo needs to be 2880px wide. Anything past 4096px on the long side gets downscaled anyway.

3. The format doesn't suit the content

JPG compresses, so sharp text and thin lines pick up fuzzy edges. PNG keeps them crisp. Icons and illustrations drawn as vectors lose their scalability the moment you export them as PNG or JPG.

• PNG: UI screens, text, flat colour, anything that needs a transparent background.
• JPG: photos. The default quality is High; leave it there if sharpness matters more than file size.
• SVG: icons and illustrations for the web. SVG exports at 1x only, which doesn't matter because it's vector.
• PDF: vector artwork for documents. Also 1x only. See how to export a Figma PDF.

4. Resampling or colour settings

Each export row has settings for resampling (Detailed or Basic) and colour profile (Same as file, sRGB or Display P3). If edges look off after fixing scale and format, try the other resampling option and compare. A profile mismatch shows up as washed-out or shifted colours rather than blur, so check it when colours look wrong in a browser.

The canvas redraws vectors at whatever zoom you use, so a design always looks crisp inside Figma. An exported PNG is fixed at the size you chose. If you check the file in an image viewer at 200%, or a slide app stretches it to fill the slide, it gets enlarged past its real pixels and softens. Export at the size it will be shown, times the screen density, and it will match what you saw in Figma.

The same goes for Copy as PNG (⇧⌘C / Ctrl+Shift+C). It copies at 2x, which is fine for chat and docs, but for a large slide or print file, use a proper export at 3x or more.

For a screen or mockup going into a presentation or portfolio, a PNG at 2x or 3x is the safe default. For a photo-heavy frame where size matters, JPG at High quality and 2x keeps text readable with a much smaller file. Add several rows to one layer if you need both.

Export settings live on the layer, in the Export section of the right sidebar. Change the scale, suffix and format on each row, and open the row's settings for quality, resampling and colour profile. For every other part of the process, including bulk export with ⇧⌘E / Ctrl+Shift+E, see how to export from Figma.