Fix Blurry Exports and Wrong Dimensions in Figma

Quick answer

Blurry raster exports almost always mean the artwork was designed smaller than the pixels you need, then scaled up at export—or you exported 1x when the destination expects 2x/3x. Wrong dimensions usually mean the frame’s width/height does not match the real CSS, ad slot, or print trim size, or Auto Layout / constraints resized the frame after you set exports. Fix it by designing at the target pixel grid, exporting with explicit scales your team documents, and anchoring exports to stable frames (not loose groups). For format-specific settings, pair this guide with how to export production-ready assets from Figma.

---

Diagnosis checklist (60 seconds)

Symptom	Likely cause	First fix
PNG looks soft on retina	Exported 1x from a frame already “small” for the slot	Add 2x export line or widen the frame to true layout width
Asset is huge in the app	Exported @2x but code treats file as 1x	Align naming + engineering convention; export 1x baseline if needed
SVG fuzzy in browser	Rasterized effects, tiny art scaled up	Remove heavy blur; rebuild at target icon grid
Wrong width in handoff	Frame resized after export setup	Re-select frame; verify W/H in right sidebar
Crop cuts off content	Export on group inside shifting Auto Layout	Move export to parent frame with fixed bounds

---

Cause 1: Designing smaller than delivery pixels

Marketing and product teams often start from a template that is not the final ad or hero size. When you export a 600 px-wide hero as the “full bleed” for a 1200 px slot, every browser upscale looks mushy.

Practical workflow

1. Duplicate a delivery frame per channel (hero_web_1440, hero_email_600) and design inside those widths.
2. For responsive web, pick one canonical width per breakpoint (for example 390 and 1440) and mirror your dev grid; see mobile app UI in Figma: frame presets and safe areas when you are aligning to device metrics.
3. If you must reuse art, redraw key type and shapes at the larger size instead of scaling a single master—especially for thin strokes and small type.

Verdict: blurry exports are rarely a Figma “bug”; they are a size contract problem between design, CMS, and CSS.

---

Cause 2: Export scale without a team convention

Adding PNG @2x is correct only if engineering expects retina assets. If the repo already stores @1x and scales in CSS, dropping random @3x files creates double scaling or mismatched aspect ratios.

What to do

• Write a one-page export spec: allowed formats, which frames are authoritative, suffix rules, and whether @2x maps to img@2x.png or a folder convention.
• When you change convention mid-project, bump a version in the file description so QA knows to re-check pages that consume the assets.

Link stakeholders to the broader Figma templates hub when multiple layout types (banners, cards, menus) each need their own export table—consistency beats heroic one-off fixes.

---

Cause 3: Frames that move after you attach exports

Auto Layout and constraints can change frame width when text wraps or when a child is set to Fill container. If your export marker lived on a child layer, the bounding box can shift between exports.

Stabilization pattern

1. Put the visible design inside a wrapper frame with explicit fixed width/height for that deliverable.
2. Attach Export settings to that wrapper, not to interior groups.
3. For components, maintain a dedicated /_export page with frozen sizes so instances in dense pages do not alter bounds.

Deepen stack behavior with Figma Auto Layout in practice: real patterns, not theory so production pages stop “breathing” between export passes.

---

Cause 4: Pixel preview, strokes, and fractional positions

Non-integer x/y positions and half-pixel strokes can look crisp in the editor but soften when rasterized to PNG—especially for 1 px hairlines on odd widths.

Mitigations

• Toggle pixel preview when preparing raster exports so anti-aliasing matches common browser scaling.
• Snap critical UI to the pixel grid; for icons, design on an even grid (commonly 24).
• Prefer inside or center strokes consistently for thin UI rules; document the choice for handoff.

---

Wrong dimensions: the five usual suspects

1. Zoom ≠ size: A frame can “look” full width on your monitor while its properties read 800 px. Always read W × H in the sidebar.
2. Export from selection: Accidentally exporting a subset of layers crops to that selection’s bounds—fine when intentional, confusing when not.
3. Slice frames: Slices drift when layout shifts; prefer frame-based exports for UI.
4. Mixed units: Print templates need mm clarity; web needs px. Converting mentally mid-file invites 1–2 px drift that breaks strict ad specs—design a banner in Figma walks layout-first sizing patterns.
5. Feature images and social crops: Marketing heroes often need safe zones for text overlays; validate against feature image in Figma guidance so exported JPEGs survive CMS crops.

---

Step-by-step: recover a “blurry hero” export

1. Confirm the slot: Ask for the exact display width in CSS or the CMS field max width.
2. Match the frame: Set the hero frame width to that value (or to 2× if you intend a single @2x file—state which).
3. Check scale lines: In Export, list only the scales your pipeline consumes.
4. Export and measure: Open the PNG in an inspector; width should equal frameWidth × scale.
5. Update the ticket: Paste dimensions and filenames so downstream does not guess.

---

FAQ

Why does my SVG look sharp in Figma but soft in the app?

The runtime may rasterize filters, or the SVG is scaled beyond its intended artboard. Outline critical strokes and remove exotic effects for small icons.

Should I design in @2x frames?

Teams split on this. What matters is one documented approach. If you design @2x, label frames and tokens so nobody exports another @2x on top.

Does Dev Mode replace exports?

Dev Mode helps with specs and sometimes assets, but marketing and many native stacks still need explicit files. Treat Dev Mode as complementary, not a substitute for a clean export page.

Where can I learn export formats in depth?

Start with how to export production-ready assets from Figma for PNG, SVG, and PDF nuances, then keep this troubleshooting page bookmarked for when dimensions “mysteriously” drift.

---

Next steps

Bake export rules into your component library, skim the Figma guides hub for setup topics (fonts, installs, shortcuts), and route beginners through the tutorials index so files arrive pre-sized—the cheapest fix for blurry exports is designing at the real destination from day one.