How to Export Production-Ready Assets from Figma (PNG, SVG, PDF)

Quick answer

Pick the export format based on how engineering or print will consume the file: PNG or JPEG for raster UI, photography, and most social deliverables; SVG for icons, simple illustrations, and logos that must scale; PDF for print shops and vector-safe handoffs where layers should stay editable for vendors. Before you export, set the frame’s intended pixel size, choose 1x vs 2x/3x deliberately, and for SVG decide whether strokes must outline for renderer compatibility. If you are exporting marketing layouts, cross-check dimensions with how to design a banner in Figma and Google ad banner sizes in Figma so you are not upscaling small frames at export time.

Prerequisites

• Frames or slices that match real output sizes (avoid “design tiny, export huge” unless you have a documented reason).
• Named layers you are willing for developers or vendors to see—SVG and PDF often preserve structure.
• For icons: consistent 24×24 (or your system grid) and componentized artwork where possible; see best Figma plugins for icons and illustrations (2026) when you need libraries, not one-off vectors.

Understand export formats

Format	Typical use	Strength	Tradeoff
PNG	UI images with transparency	Crisp edges, alpha	Larger than JPEG for photos
JPEG	Photography, gradients	Smaller files	No transparency
SVG	Icons, simple logos	Infinite scale	Complex filters may not translate
PDF	Print, vendor handoff	Vector + pages	Heavy if you embed huge rasters

PNG and JPEG exports

1. Select what to export

Use frames as export boundaries whenever you can—frames carry explicit width/height and scale predictably. For partial crops, add Export settings on the frame or use Slice frames sparingly (slices are easy to misalign when auto layout shifts).

2. Set scale (1x, 2x, 3x)

• 1x: Baseline web assets when your frames already match CSS pixel dimensions.
• 2x / 3x: Raster UI for retina displays; pair with engineering so filenames or folders (@2x) match the codebase convention.
• Avoid exporting only @3x and letting CSS shrink without coordination—teams differ on whether they want true 1x assets for legacy screens.

3. Choose PNG vs JPEG

Use PNG when you need transparency (badges, stickers, cutout products). Use JPEG for full-bleed photography hero backgrounds where transparency is irrelevant and file size matters for performance.

4. Prefixes and suffixes

Use consistent naming (hero_home, icon_close) so ZIP handoffs sort cleanly. If localization swaps imagery, mirror locale codes in filenames your CMS expects.

SVG exports (icons and illustrations)

1. Flatten vs editable

For icons shipped to production, outline strokes (or expand strokes before export) when stroke alignment has caused surprises in browsers. Keep a master component with live strokes for design edits, and duplicate an export component if you need different geometry for web.

2. Remove hidden cruft

Delete hidden layers, mask leftovers, and unused effects—SVG file size and runtime cost climb fast when paths duplicate.

3. Id and class hygiene

Some tools emit verbose ids; run a quick diff in your repo’s SVG pipeline or ask engineering if they optimize with SVGO—designers should still avoid obvious redundancy (duplicate paths for “shadow” experiments you abandoned).

4. Text in SVG

Convert to outlines when vendors must open files without your font license; keep live text when web fonts guarantee rendering and SEO needs selectable text.

PDF exports (print and formal handoff)

1. Bleed and margins

For print, set export bleed in File → Export flows your print vendor expects, and keep critical content inside safe margins—how to design flyers using Figma and business cards in Figma expand on layout patterns that survive trimming. For more layout-first starting points, see the Figma templates hub.

2. Raster vs vector in PDF

High-resolution photos embedded in PDFs are fine for brochures; for sharp type, prefer vector text when the printer supports it. When a PDF balloons in size, audit embedded image resolution—exporting a 6000 px photo into a small card PDF wastes bytes.

3. Multi-page PDFs

Organize pages top-to-bottom on the canvas or use separate frames per page with clear naming (menu_cover, menu_inside_spread) so exports land in reading order.

Export settings panel (quick workflow)

1. Select the frame or layers to export.
2. In the right sidebar under Export, click +.
3. Choose format (PNG, JPG, SVG, or PDF) and scale.
4. For multiple scales, add additional lines (1x + 2x is common).
5. Click Export and choose the destination folder.

For batch exports across a page, use the Assets panel’s export list after you mark individual layers—handy when engineers request all icons in one pass.

Reusable export presets (save your team time)

Once you settle on naming and scales for a project, store them as saved export settings on components or style-guide frames so contractors do not reinvent @2x suffixes. A practical pattern:

• Icons: SVG only, Outline strokes enabled where your pipeline requires it, exported from a dedicated /_export / icons page.
• App chrome: PNG at 1x and 2x from frames that already match production widths (for example 375w mobile and 1440w desktop artboards).
• Editorial / blog: JPEG at 2x for hero images when the CMS downscales, paired with a written max KB budget in the ticket.

Document those presets beside your feature image in Figma guidelines so marketing and product use the same boxes. When a preset changes mid-project, bump a version in the file description (export preset v3 — added @3x for Android) so QA knows to regression-test layouts that consume the assets.

Step-by-step: multi-scale PNG for a single screen

1. Frame the screen at the true CSS width (for example 390 × 844 for a mobile reference).
2. Toggle pixel preview (when available) so you see anti-aliasing similar to browsers.
3. Select the frame, add Export → PNG → 1x and PNG → 2x (add a line per scale).
4. Use a suffix pattern your codebase expects (home_header, home_header@2x) or rely on Figma’s automatic @2x naming—just pick one convention per repo.
5. Export and open both files in Preview or an image tool: the 2x asset should look sharp on retina, while 1x remains the fallback for older pipelines.
6. Attach the pair to the ticket or upload to your DAM; note any safe-area crops if engineers slice further in code.

Handoff checks that prevent production bugs

• Dimensions: Confirm frame size matches the CSS box or print spec, not an arbitrary zoom level.
• Color space: Web stays sRGB for predictable browser rendering; print may require CMYK conversations handled by the vendor—do not silently assume Figma’s RGB equals press output.
• Effects: Blur and shadow may rasterize in SVG/PDF paths; preview in the target viewer (browser, Acrobat, print proof).
• Retina math: If you export @2x, verify engineering divides by devicePixelRatio logic correctly—design’s job is consistent naming and sizes; engineering maps to code.

Troubleshooting

• Blurry icons: You likely scaled a small frame up at export; redesign at the target pixel grid or export at higher scale from a sharp master.
• Chunky PNGs: Too large a frame with unnecessary retina scale; drop scale or crop to the smallest bounding box.
• Broken SVG in app: Mixed center vs inside strokes, masks, or booleans—outline critical paths and remove exotic effects.
• Wrong crop: Auto layout padding changed; re-pin exports to frames, not loose groups.

FAQ

Should I export from components or instances?

Prefer components or dedicated export frames so updates propagate; for one-off marketing, direct frames are fine if you version filenames.

Do I need plugins for export?

Often no—native export covers most cases. Plugins help for bulk rename, platform presets, or token-linked pipelines; start with Figma plugins after native export feels repetitive.

How do I hand assets to developers alongside specs?

Pair ZIP exports with Dev Mode links when your org uses them, and reference best Figma plugins for developers for inspect and token workflows that reduce back-and-forth.

What about AVIF or WebP?

Figma’s direct export list focuses on PNG/JPG/SVG/PDF; use build-time image optimization in the web pipeline for modern formats.

How do I export for social vs web product?

Social often needs platform-specific dimensions; web product needs performance budgets. Keep separate frames per channel so one export preset does not serve two masters.

Next steps

Tighten upstream skills with Figma Auto Layout in practice so frames stay stable when content changes, and browse the Figma guides hub plus tutorials index for layout-first lessons that make exports boringly predictable—the best export workflow is a file structure that does not fight you.