Most “bad export” problems are not random. They come from one of five mismatches: the wrong format, the wrong pixel dimensions, an unexpected export boundary, a color-profile change, or an export command that does not expose the option you expected. The fix is to define the delivery target first, then choose the documented path in Figma or Photoshop.
This guide was checked against current Figma and Adobe documentation on August 13, 2026. The application interfaces were not opened for this editorial update, so menu paths and capabilities below are labeled docs-verified, not presented as first-hand app test results. UI labels can change; use the linked vendor documentation when your installed version differs.
Download the blank export-test manifest (CSV). Fill it only after running the documented source assets in the named application and version; a blank row is not an app-tested result.
Choose the delivery format before touching Export
| Asset | Usually start with | Why | Common failure |
|---|---|---|---|
| Logo or icon | SVG when the destination supports it; PNG when a raster file is required | SVG scales without raster blur; PNG supports alpha transparency | Exporting JPEG removes transparency and can soften edges |
| UI screenshot or diagram with text | PNG | Lossless raster output keeps sharp edges and small text more predictable | Lossy compression makes text and one-pixel lines look dirty |
| Photograph | JPEG or a modern compressed format supported by the delivery pipeline | Lossy photographic compression can reduce transfer size substantially | Using PNG for a large photo creates an unnecessarily large file |
| Asset requiring transparency | PNG, SVG, or WebP as supported by the target | These formats can represent transparent pixels | JPEG replaces or composites transparent areas |
| Print handoff | Follow the printer’s PDF, profile, bleed, and resolution specification | Print requirements are not the same as web delivery | Treating a 72/144 PPI tag as the only quality measure |
No format is automatically “best.” PNG is lossless but can be larger; JPEG is compact for photographs but has no alpha channel; SVG is excellent for suitable vector artwork but can behave differently when it contains effects, fonts, or unsupported features. Read our PNG vs WebP vs JPEG guide for format-level tradeoffs, and our alpha-channel guide for transparency details.
Current Figma static-export settings: what is actually documented
Figma’s current help center lists PNG, JPG, SVG, and PDF for static-design exports. It does not document a PNG-8/PNG-32 selector. Instead, Figma states that its PNG export is a 32-bit RGBA PNG and includes an alpha value. Do not tell users to find a Figma “PNG-8” switch that the official interface documentation does not list.
- Scale: enter a multiplier with
x, a fixed width withw, or a fixed height withh. Figma documents SVG and PDF export at 1x. - Color profile: export using the file profile, sRGB, or Display P3. The correct choice depends on the delivery specification; sRGB remains the safer common target when broad web consistency matters.
- Image quality: current documentation exposes image quality for JPG and PDF. It does not describe the old universal 0–100 JPG slider asserted in earlier versions of this article.
- Image resampling: Detailed uses bicubic sampling for detail, gradients, shadows, and high-quality imagery; Basic uses nearest-neighbor sampling for hard edges, low-resolution assets, and pixel art.
- Ignore overlapping layers: enabled by default; changing it can include intersecting layers that were not selected.
- Include bounding box: applies to text layers and controls whether empty or clipped bounding-box space affects the export.
- SVG-specific settings: Include
id, Outline text, and Simplify stroke are documented. Outlined text preserves appearance but is no longer editable as text in the exported SVG.
Figma export path: docs-verified workflow
- Select the exact frame, group, component, layer, or slice that defines the asset boundary.
- Add an Export setting and choose PNG, JPG, SVG, or PDF.
- Set the required scale or fixed pixel width/height for a raster export.
- Open export settings and confirm color profile, resampling, overlapping-layer behavior, and any format-specific options.
- Export, then verify the file outside Figma at 100% zoom and at its intended CSS or print size.
Use Figma’s Pixel Preview before export when rasterization is important, but still inspect the exported file. A preview cannot confirm the final filename, embedded profile, dimensions, bytes, or how another application decodes the asset.
Current Photoshop export paths—and where WebP lives
Photoshop has multiple commands because “save an editable document,” “export web assets,” and “write a WebP file” are different jobs.
| Goal | Docs-verified path | Documented formats/options |
|---|---|---|
| Repeat a predefined quick export | File → Export → Quick Export as… | Quick Export preferences support PNG, JPG, or GIF, with format, location, metadata, and color-space choices |
| Fine-tune asset exports | File → Export → Export As | PNG, JPG, GIF, or SVG; format settings, relative sizes, and suffixes |
| Create WebP in Photoshop 23.2+ | File → Save a Copy, then choose WebP | Lossless or lossy; lossy Quality; XMP, EXIF, and Photoshop Extras options |
| Use WebP in Photoshop 23.1 or older | Install Adobe-linked WebPShop plug-in if maintaining that old version is unavoidable | Legacy path; update Photoshop when your environment permits |
| Control pixels before export | Image → Image Size | Pixel dimensions, width, height, resolution, and resampling |
Adobe states that Photoshop 23.2 added native WebP support without a plug-in or preference change. After choosing WebP through Save a Copy, choose Lossless or Lossy; the Quality control applies to lossy output. Depending on the document and overwrite/data-loss risk, WebP may also appear under Save As, but Save a Copy is the consistently documented route.
If a WebP must become PNG for a downstream editor or platform, you can open and save it in a current Photoshop version. For a fast browser-side conversion, use our WebP to PNG converter. Converting a lossy WebP to PNG prevents another lossy encoding step, but it cannot reconstruct detail already removed from the WebP.
Pitfall 1: transparency becomes white, black, or solid
First confirm the source really has transparent pixels. A checkerboard in a design tool can indicate transparency, but it may also be a visual layer in the artwork. Hide the document background and inspect the layer or frame boundary.
- Do not use JPEG when the output requires transparency.
- In Figma, use PNG or SVG for transparency; Figma documents PNG as RGBA.
- In Photoshop Export As, enable the documented PNG transparency option.
- In Photoshop WebP options, verify the document is supported and use the appropriate lossless/lossy settings; Adobe documents native WebP saving for 8-bit RGB documents.
- Check the destination too. Some publishing tools composite transparent assets against a default background even when the file still contains alpha.
Pitfall 2: the export is blurry or the wrong size
For screen delivery, start with pixel dimensions. If an image is rendered at 1200 × 800 CSS pixels and you deliberately provide a 2x raster source, the source is 2400 × 1600 pixels. That is four times the pixel area, not “twice the file size.” Compression determines the final bytes, so never publish a fixed size multiplier without testing the actual asset.
PPI metadata is important for physical print size but does not add pixels. Adobe’s current Image Size documentation separates Dimensions (pixel count) from Resolution (pixels per inch for print). In Figma, a 2x export creates more pixels and carries documented DPI behavior, but web layout still depends on CSS, responsive markup, and the displayed dimensions.
- Match the export to the maximum intended rendered size; use responsive
srcsetrather than sending the largest asset to everyone. - Use Detailed/bicubic-style resampling for photographic detail and gradients; use Basic/nearest-neighbor only when hard pixel edges are intentional.
- Inspect at 100% pixel zoom. A design-tool zoom level can hide or exaggerate softness.
- Avoid repeated upscaling. Export again from vector or high-resolution source artwork instead of enlarging a small raster result.
- Check the exact selected object. A whole frame, hidden layer, shadow, or text bounding box can change output bounds.
Pitfall 3: colors look dull, oversaturated, or different
Color values need a profile and a color-managed display pipeline to have a predictable appearance. Figma can use the file profile, sRGB, or Display P3 at export. Adobe recommends sRGB for images prepared for broad web viewing and provides Edit → Convert to Profile for converting an existing document.
Do not automatically strip a profile to save a few bytes and then promise identical color everywhere. An untagged image can be interpreted differently. Conversely, Display P3 can preserve a wider gamut in a managed workflow, but not every delivery system, screenshot process, or review tool will reproduce it identically. Decide whether the project requires broad sRGB consistency or a controlled wide-gamut pipeline, then document that choice.
Pitfall 4: the file is much larger than expected
There is no responsible universal claim such as “quality 80 is always one-third the size” or “optimization cuts every PNG by 70%.” Results depend on dimensions, alpha, image content, color count, noise, encoder, and settings. Use a measured workflow:
- Remove pixels you do not deliver: crop transparent padding and export only the required frame, layer, or slice.
- Choose a format that matches the content. Large photographs and flat interface graphics behave differently.
- Export at the required dimensions, not the design canvas’s largest convenient size.
- Create two or more deliberate candidates where lossy quality is acceptable.
- Compare bytes and inspect at the real display size, 100% zoom, and any critical enlarged view.
- Record the chosen application version, command, format, dimensions, profile, and quality mode so the result can be reproduced.
Original reproducible export test suite
Use the same five synthetic source assets whenever a workflow or application version changes. The suite tests properties, not brand photography, and produces deterministic pass/fail checks. It does not claim that Figma or Photoshop was run for this article revision.
| Test asset | Construction | What it detects | Acceptance check |
|---|---|---|---|
| A: Alpha corners | 512 × 512 canvas; opaque center; corners at 0%, 25%, 50%, and 100% alpha | Flattening, alpha loss, and matte contamination | PNG/WebP alpha samples retain the intended four states; JPEG is explicitly excluded |
| B: One-pixel grid | 400 × 400 alternating one-pixel lines plus a 20-pixel reference square | Unexpected scaling and inappropriate smoothing | Output dimensions are exact; line cadence matches the chosen resampling method |
| C: Gradient and text | 1200 × 630 gradient, 12/16/32-pixel text, and sharp vector edges | Banding, lossy text artifacts, and SVG text treatment | Review at 100%; record whether text is glyphs/outlines and whether gradients show visible steps |
| D: Profile patches | Labeled sRGB and wide-gamut color patches from a controlled source file | Profile conversion or stripping | Inspector reports the intended output profile; screenshots are not accepted as profile evidence |
| E: Boundary stress | Selected object with shadow, overlapping neighbor, hidden background, and transparent padding | Wrong layer/frame bounds and overlap settings | Pixel dimensions and edge content match the documented export boundary |
Record a manifest for every run
test_id,application,version,os,export_command,format,width_px,height_px,
color_profile,alpha_expected,resampling,quality_mode,bytes,sha256,result,notesThis manifest makes original tests publishable and auditable. A screenshot alone cannot prove dimensions, bytes, profile, or alpha values. Keep the source assets, outputs, manifest, and hashes together; if a version changes, run the same suite and compare rows.
Fast troubleshooting table
| Symptom | Check first | Likely correction |
|---|---|---|
| White/black background | Format and real source alpha | Use PNG/SVG/WebP as supported; enable transparency; remove an actual background layer |
| Blur at normal size | Output pixels versus rendered pixels | Export exact dimensions or an intentional responsive 2x candidate; choose suitable resampling |
| Unexpected whitespace or clipping | Selected frame/layer/slice and bounding-box settings | Correct the export boundary; review overlaps, shadows, and text bounds |
| Color shift | Source and output profiles | Use the delivery profile intentionally; convert to sRGB for the documented broad-web workflow |
| Huge file | Dimensions, crop, and format/content match | Remove excess pixels and compare measured candidates |
| WebP option missing in Photoshop Export As | Command and Photoshop version | In 23.2+, use Save a Copy for WebP; Export As currently lists PNG/JPG/GIF/SVG |
| Expected Figma PNG-8 switch is missing | Source of the instruction | Use current Figma export settings; do not rely on undocumented PNG-8/PNG-32 controls |
A reliable handoff checklist
- Write the target format, pixel dimensions, color profile, transparency requirement, and maximum bytes before export.
- Name the selected frame/layer/slice and keep its bounds deliberate.
- Record the application version and exact export command.
- Verify the output outside the design tool.
- Inspect pixel dimensions, alpha, color profile, bytes, and visible quality.
- Use hashes when publishing a reusable benchmark or downloadable test set.
- Do not present documentation review as an in-app experiment.
- Recheck vendor documentation when the UI changes.
Good export practice is less about memorizing one “perfect” quality value and more about making each choice testable. Define the target, use the current documented path, export a controlled candidate, and verify the actual file. That workflow prevents most transparency, blur, color, and size surprises before they reach production.
Official references
- Figma: Export formats and settings for static designs — formats, scale syntax, profiles, resampling, and format-specific settings.
- Adobe: Work with WebP files in Photoshop — native WebP in Photoshop 23.2+, Save a Copy, lossless/lossy controls, and legacy plug-in scope.
- Adobe: Fine-tune export settings with Export As — current Export As formats and size/suffix controls.
- Adobe: Quick Export — current preferences, formats, transparency, metadata, and color-space options.
- Adobe: Set image size and resolution — dimensions, PPI, and resampling.
- Adobe: Color-managing documents for online viewing — sRGB guidance for broad web delivery.