Figma PNG, JPG, SVG, and PDF Export Settings Explained
Figma export settings should be chosen by asset role. A website image, app icon, UI screenshot, logo, illustration, social graphic, document preview, and developer handoff asset can all come from the same design file, but they should not all leave Figma with the same format and scale.
For example, when an agency hands off a product page, developers may need SVG icons, 2x PNG UI screenshots, and compressed JPG marketing previews. The export panel can produce those delivery assets, but only if scale, suffix, color profile, and format settings are chosen deliberately.
What PNG is best for
PNG is often the safest raster format for UI screenshots, text-heavy visuals, transparent assets, icons that must remain crisp, and mockups with sharp edges. It supports transparency and usually preserves interface detail better than JPG. The tradeoff is file size, especially for large frames, gradients, and image-heavy designs.
Use PNG when small text, icons, borders, or transparent backgrounds matter more than raw file weight. If the PNG is too large, compress the delivery copy and preview the result before replacing it in a website, document, or handoff folder.
What JPG is best for
JPG is practical for photo-like exports, rich client previews, social graphics, and marketing images that do not need transparency. It usually creates smaller files than PNG for photographic content. The risk is compression artifacts around UI text, icons, flat color edges, and detailed labels.
If a JPG preview makes a button label or UI screenshot look fuzzy, it is the wrong format or quality setting for that role. Use PNG instead, or export a higher-quality JPG only if the visual is mostly photo-like.
What SVG is best for
SVG is best for scalable vector assets such as icons, logos, simple marks, line illustrations, and developer handoff assets that need to remain resolution-independent. It is not the right choice for every frame. Complex raster images, photo-heavy mockups, and visual effects may not translate as expected.
Preview SVG outside Figma. Check fonts, masks, gradients, strokes, effects, and implementation context. If the production environment handles the SVG differently, the developer may need a simplified vector or a raster fallback.
What PDF is best for
PDF is useful for documents, presentation-style exports, design reviews, and handoff contexts where pages or frames need to travel together. It is not a universal web image. A PDF can be excellent for a client review deck, but a website image slot usually needs PNG, JPG, SVG, or another production-ready image format.
Use PDF when the recipient needs a document-like preview, not when the asset is a single icon, transparent graphic, or website image.
Why 1x, 2x, and 3x exports matter
Figma export scale determines output pixel dimensions. A 1x export is usually the base frame or asset size. A 2x export doubles the pixel dimensions. A 3x export creates even more pixels. More pixels can help in some high-density display contexts, but they also increase file size and can be unnecessary for small website placements.
Suffixes help handoff because they make intent visible in the file name. A developer can understand icon@2x.png, hero-web.jpg, or logo.svg faster than a generic frame name. Keep the source frames unchanged and use export naming to create organized delivery copies.
Asset role decision table
| Asset role | Best format | Recommended scale logic | Risk | What to preview |
|---|---|---|---|---|
| Website image | JPG for photo-like visuals, PNG for sharp UI or transparency. | Match the rendered slot; use 2x only if the site needs extra raster detail. | Large files or soft text. | Browser size, crop, loading weight, and text clarity. |
| App icon | SVG for vector source, PNG for required raster sizes. | Follow developer or platform size requests and suffix naming. | Wrong padding or fuzzy small output. | Small-size edges and transparent background. |
| UI screenshot | PNG. | Use 1x, 2x, or custom based on the destination document or site. | Unreadable labels after JPG export or compression. | Text, icons, borders, and controls. |
| Logo or mark | SVG when supported, PNG when a raster file is required. | Keep vector source stable and export specific delivery sizes. | Font, mask, stroke, or effect mismatch. | Browser rendering and brand-safe edges. |
| Illustration | SVG for clean vector art, PNG for complex effects, JPG for photo-like art. | Choose scale based on final placement. | Effects differ outside Figma or files become too heavy. | Gradients, masks, shadows, and edge quality. |
| Social graphic | JPG or PNG depending on text and transparency needs. | Export to the target post size or review size. | Text artifacts or oversized delivery file. | Mobile readability and final platform crop. |
| Document preview | PNG for UI detail, JPG for photos, PDF for document-style review. | Export to the placed size in the document. | Small text becomes blurry after insertion. | The exported file inside the actual document. |
| Developer handoff asset | SVG, PNG, or JPG based on implementation need. | Use suffixes and requested sizes so files are easy to consume. | One generic export forces developers to reinterpret design intent. | Final browser or app environment. |
After choosing the format and scale, export a PNG or JPG delivery copy and use ConvertiImage only when the file needs careful size reduction. Then continue with the step-by-step Figma export workflow.
Next useful pages
- For the export workflow, read how to export images from Figma without losing quality.
- For the full overview, return to Figma export image optimization.
Sources checked
This decision guide was informed by Figma export formats and settings, Figma export static designs guide, Figma color profile guidance, Google people-first content guidance, and AdSense page readiness guidance.
