How to Export Images from Figma — Batch Export & PNG/SVG/PDF Settings

“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. Per the official docs, exporting works on any plan, and can-view access is enough to export — provided the file’s owner hasn’t restricted copying and sharing¹.

The range of things you can export is wider than most people use. The docs list layers, frames, components, groups, and sections, plus a region of the canvas via the Slice tool, a page’s entire canvas, and the whole file as a .fig¹.

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 — the official docs state this outright for both formats² (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; the docs locate it under the Region tools dropdown in the toolbar)¹. 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.

There’s a subtler reason to reach for it: the docs point out that a slice lets you control the padding around the exported object¹. Without one, padding is computed from the shape’s bounds and therefore shifts whenever the shape is resized — a slice is absolute. ⚠️ The Slice tool needs edit access.

📦 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. The official docs make the same call: JPG can’t hold transparency and its compression can hurt text readability, so anything with text or transparency should go out as PNG or SVG².

Cause 5: Image quality left at its default

This one is easy to miss. Per the docs, JPG and PDF both have an Image quality setting, defaulting to High for JPG and Medium for PDF². When a PDF looks soft or coarse, that Medium default — not the scale — is often the cause. You can change it from the Export section in the right sidebar. There’s also an Image resampling option, which helps hold quality when an export involves scaling².

🎨 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.

⚠️ Two things to know before handing over a PDF: the docs state that Figma exports to PDF 1.7 and writes text as glyphs, so text in the finished PDF can’t be edited (you can still select and copy it)², and that the Plus darker and Plus lighter blend modes aren’t supported in PDF exports².

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. The docs list five SVG export settings — Ignore overlapping layers / Include bounding box / Include “id” attribute / Outline text / Simplify stroke². ⚠️ Only SVG gets all five: PNG and JPG offer the first two, and PDF offers none of them².

One more thing worth knowing about PNG: the docs note that Figma writes 32-bit PNGs using RGBA, and that exporting a PNG without an alpha value isn’t possible². That covers elements that already have a transparent background — but if you want to keep the subject of a photo and drop what’s behind it, that’s a separate job: Figma AI’s Remove background (a paid-plan feature that consumes AI credits), a background-removal plugin, or an external editor. How to Remove a Background in Figma walks through the routes and when each one fits.

🔄 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 first, then use the export steps in this article. For the conversion options and how to pick between them, see the best Adobe XD to Figma plugins.

❓ 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.

Everything in this article about how Figma behaves is sourced to Figma’s official documentation, cited below. Everything about how Pixel Fine Converter converts files is first-hand: it comes from our own source code and hands-on testing.

Sources

1. Export static designs from Figma — exporting on any plan and with can-view access (unless the owner restricted copying and sharing), what can be exported (layers / frames / components / groups / sections / a Slice / a whole page / the file as .fig), the Slice tool’s location under Region tools and its absolute padding control, Preview not appearing with multiple objects selected, and Show in exports on a fill (checked 2026-08-20) ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶

2. Export formats and settings for static designs — PNG being 32-bit RGBA with no alpha-free export, JPG lacking transparency and its compression affecting text readability, SVG and PDF exporting at 1x only, PDF 1.7 with text written as glyphs (uneditable) and Plus darker / Plus lighter unsupported, the per-format settings matrix (Ignore overlapping layers / Include bounding box / id / Outline text / Simplify stroke), and Image quality defaults (JPG High / PDF Medium) plus Image resampling (checked 2026-08-20) ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶ ↩⁷ ↩⁸ ↩⁹

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
• Guide: Export — full reference for Pixel Fine Converter’s export options