How to Export Images from Figma — Batch Export, Resolution Settings, and PNG/SVG/PDF

“I need to export 20+ frames as images at once.” “My exported PNG looks blurry for some reason.” “I can’t tell whether PNG, SVG, or PDF is the right choice.” — Once you reach the stage of shipping deliverables out of Figma, it’s surprisingly easy to get stuck.

Figma’s Export feature is powerful — once you learn the settings, you can output many elements at once — but the wrong scale or format leads to quality problems and rework.

This article walks through, in the order they come up in practice: the Export settings panel → batch-exporting multiple elements → diagnosing blurry results → choosing between PNG/SVG/PDF/JPG → notes for files migrated from XD. Drawing on Pixel Fine Converter’s work on XD → Figma conversion, we also cover what tends to trip people up when exporting a migrated file.

What you’ll get out of this article

• The basics of Figma’s Export settings panel (format, scale, suffix)
• How to export multiple frames / elements in a single pass
• How to diagnose and fix blurry or low-quality exports
• When to choose PNG vs SVG vs PDF vs JPG
• The specific gotchas when exporting a file migrated from XD

📝 Introduction — Three common export scenarios

When export gets confusing in Figma, the situation usually falls into one of three buckets. The fix differs across them, so identify your case first.

Scenario A: Export one element in a fixed format

Export one icon as SVG, one banner as PNG. Select the element, add an Export setting, done — basic operations cover this.

Scenario B: Export many frames or elements at once

Export all 20 screens as PNG, or 50 icons as SVG. Exporting one at a time is inefficient, so you use multi-select + batch export — this is where most “export everything at once” needs land.

Scenario C: The exported image looks low-quality or blurry

“It’s blurry on a Retina display.” “It’s grainy when zoomed in.” Most of the time this comes down to scale settings or the source image resolution, and sometimes a format change is the real fix.

Below we cover A (basics) → B (batch) → C (quality) in order.

🧭 Figma export basics — the Export settings panel

In Figma you export from the Export section at the bottom of the right sidebar (Design tab), with an element selected. Export is available on the free plan — no special permissions required.

Adding an Export setting

1. Select the element you want to export (frame / group / layer)
2. Click the ＋ next to Export at the bottom of the right sidebar
3. Set scale, format, and suffix
4. Click Export [element name]

The three settings

Note that SVG and PDF ignore the scale setting and always export at 1x (vector formats are resolution-independent). When you need a high-resolution raster for scaling up, export PNG at 2x / 3x.

You can stack multiple Export settings on a single element. Add “1x PNG”, “2x PNG”, and “SVG” to the same icon, and one export produces all three files at once.

The Slice tool

When you want to export an arbitrary rectangular region rather than a specific element, use the Slice tool (shortcut S). It exports just the region you draw, regardless of layer structure — useful for cutting out part of a banner. Note that keyboard shortcuts can vary depending on your keyboard layout or custom settings.

📦 Exporting multiple elements at once

This is the part that maps directly to “export everything at once” needs. Figma lets you batch-export with multiple elements selected.

Steps

1. Multi-select the elements you want (Shift + click, or drag a marquee)
2. In the Export section, click ＋ and set format and scale
3. Click Export [N] layers (N = number selected)
4. Every selected element is exported as its own file

Each element is exported as a separate file, named after the element (layer / frame). Tidying up layer names before exporting makes the resulting files far easier to manage.

Exporting all frames on a page

To export every frame laid out on a page, select them together and use Export [N] layers. If each frame is named, the screen name becomes the filename.

Pre-load Export settings

Add an Export setting (e.g. 2x PNG) to the frames you’ll ultimately ship, and you won’t have to reconfigure each time. To apply the same setting to multiple frames, select them all first, then add the Export setting — it applies to every element in the selection.

🔍 Fixing blurry or low-quality exports

Blurry exports are a genuinely common complaint. The causes break down cleanly.

Cause 1: Scale left at 1x (the most common)

On a high-resolution (Retina / high-DPI) display, a PNG exported at 1x looks soft. If you want it crisp for web or documents, export at 2x or higher as a baseline.

• Web use: start from 2x
• Print / large display: 3x or higher, or a vector format (SVG / PDF)

Cause 2: The source image (image fill) is low-resolution

If the photo or bitmap placed in Figma is itself low-resolution, raising the export scale won’t recover detail — it just enlarges the existing coarseness. Here you need to replace the source with a higher-resolution image.

Cause 3: Exporting a vector as PNG

Elements built as vectors (icons, logos) get locked to a fixed resolution when exported as PNG (raster), so they blur when scaled up. Export as SVG and they stay crisp at any size.

Cause 4: JPG compression

JPG is a lossy format, so gradients and text edges can pick up compression noise. The rule of thumb: PNG for logos, UI, and anything with text; JPG for photos.

🎨 Choosing between PNG / SVG / PDF / JPG

Format choice comes down to “raster (PNG/JPG) or vector (SVG/PDF)” and “web or print.”

Bundling multiple frames into one PDF

To combine all frames on a page into a single PDF, use the main menu (the Figma logo, top-left) → File → Export frames to PDF. Every frame on the current page becomes one page, ordered left-to-right, top-to-bottom. This suits review decks and print delivery where you want every screen in one file, so ordering and naming your frames beforehand keeps the resulting PDF’s structure predictable.

Selecting only specific frames to merge into one PDF, however, isn’t a native feature. Exporting frames via a PDF export setting produces a separate PDF per frame — so reach for a dedicated plugin when you need a hand-picked subset in one file.

Handing off to engineers and teammates: think vector

When handing icons to engineers, SVG, not PNG, is the default. SVG can be treated as code, with color and size adjusted in CSS. SVG export settings let you tweak options such as including the id attribute or outlining text.

🔄 Exporting files migrated from XD

When you export a file freshly migrated from Adobe XD to Figma, a few migration-related points are worth keeping in mind to avoid export trouble.

Image fills carry the resolution they had in XD

If an image placed in XD was low-resolution, it stays that way after migrating to Figma. Raising the export scale won’t recover detail (see Cause 2), so replace important images with higher-resolution versions after migrating.

Font fallbacks show up in exports too

If a font went missing during migration and was replaced with a fallback, that fallback appears in your exported images. Confirm fonts are applied correctly before exporting anything with text. For font issues, see Why Figma fonts aren’t showing.

Vector shapes export cleanly as SVG

Vector shapes (shapes / paths) converted from XD are treated as vectors in Figma, so exporting them as SVG keeps them crisp at any resolution. For how XD shapes translate into Figma, see Converting Adobe XD Shapes to Figma.

If you still have un-migrated XD files, convert them to Figma with Pixel Fine Converter first, then use the export steps in this article.

❓ Frequently asked questions

Q: Can I export multiple frames at once?

Yes. Multi-select the frames, add an Export setting, and click Export [N] layers — every selected frame is exported as its own file in one pass.

Q: My exported image is blurry. What should I do?

First raise the scale to 2x / 3x. If that doesn’t help, the source image (image fill) may be low-resolution, or you may be exporting a vector element as PNG. Vectors stay crisp when exported as SVG, independent of resolution.

Q: How do I choose between PNG and SVG?

PNG for photos and images needing transparency; SVG for icons, logos, and vector assets handed off to engineers and teammates. Choose SVG when you need scaling or code integration.

Q: Can I bundle several screens into one PDF?

To merge all frames on a page into one PDF, use the main menu (the Figma logo, top-left) → File → Export frames to PDF (each frame becomes a page). There’s no native option to merge only a hand-picked subset of frames — exporting via a PDF export setting yields a separate file per frame — so use a plugin for that.

Q: Is export available on the free plan?

Yes. Figma’s Export feature works on the free plan. No special permissions or upgrade required.

Q: Quality drops when I export a file migrated from XD

If images placed in XD were low-resolution, they carry that resolution after migrating, so raising the scale won’t recover detail. Replace important images with higher-resolution versions after migrating. Vector shapes can be exported crisply as SVG.

Q: Reconfiguring export every time is tedious

Pre-load Export settings on the elements you’ll ship, and subsequent exports start from the configured state. To apply the same setting across frames, select them together first, then add the Export setting.

🎯 Wrapping up

Figma export results come down to whether you’ve matched the format and scale to the use case.

Key takeaways

• Export from the right sidebar’s Export section — available on the free plan
• Batch export finishes with multi-select → Export [N] layers
• Blurry / low-quality diagnoses in order: ① scale 1x → 2x/3x, ② source image resolution, ③ SVG for vectors
• Format choice comes down to “raster (PNG/JPG) or vector (SVG/PDF)” and “web or print”
• Multiple frames can bundle into one PDF
• Files migrated from XD carry image-fill resolution and font fallbacks into the export
• Export is native Figma; the XD import (conversion) is a separate step that Pixel Fine Converter handles

The single biggest time-saver is pre-loading Export settings on the elements you’ll ship. It removes the reconfigure-every-time tax and makes batch exporting instant.

If you still have XD files not yet in Figma, convert them with Pixel Fine Converter first, then put the export steps in this article to work.

Related pages

• Bulk Font Replacement in Figma — companion in the Figma operations cluster (font bulk change)
• Bulk Color Replacement in Figma — companion in the Figma operations cluster (color bulk change)
• Bulk Text Style Replacement in Figma — companion in the Figma operations cluster (text style bulk change)
• How XD Colors and Gradients Translate to Figma — XD → Figma color and image fidelity
• Converting Adobe XD Shapes to Figma — how vector shapes translate
• Adobe XD to Figma migration — a practical guide — the end-to-end migration workflow
• Why Figma fonts aren’t showing — checking fonts before export