Designers and front-end asset owners use Figma Dev Mode to communicate spacing and intent, yet the annotated slice PNG you ship must still obey hard raster rules: whole-pixel frames, integer @1x/@2x/@3x scales, a single sRGB contract, and predictable file names. This article is a 2026 delivery decision matrix: where Dev Mode helps, where it misleads, and how to run the same batch acceptance pass on a remote Mac mini M4 so QA is reproducible.
Three recurring gaps cause rework. First, fractional layout inside a slice exports as soft edges or uneven widths at 2× and 3×. Second, preview versus file: Dev Mode and the browser scale previews differently, so teams argue about sharpness while the PNG on disk is already wrong. Third, silent color drift when ICC policy is undefined across handoff ZIPs and Windows review machines. Pair this guide with the Figma vs Sketch transparency comparison for cross-tool alpha behavior and the sRGB / Display P3 checklist for profile gates. For byte and format contracts after transcoding, see the WebP to PNG delivery matrix.
Table of Contents
Export Parameters Table
Dev Mode accelerates inspection, but the export preset is still the contract. Copy the table into your handoff README as a single line of truth before anyone presses Export.
| Parameter | Recommended (web / app UI) | Notes |
|---|---|---|
| Format | PNG (8-bit RGBA) | JPEG is a poor fit for crisp UI edges and transparency. |
| Scales | 1×, 2×, 3× only | Custom percentages break integer expectations for srcset and CI validators. |
| Frame bounds | Integer X, Y, width, height at 1× | Sub-pixel origins compound at higher scales and blur strokes. |
| Color | One sRGB policy (embed ICC or profile-free with written rule) | Reject double profiling from plugins or post-export tools. |
| Background | Transparent or solid per spec | Accidental “include background” fills destroy alpha QA. |
| Slice naming | Component_state@2x.png aligned to design tokens |
Layer name equals file name; forbid spaces if your bundler is strict. |
Quotable rules for README: (1) Logical design width in points equals exported 1× width in pixels. (2) At scale s, expect round(frame_w × s) with s in {1,2,3} only. (3) Alpha must exist on every slice marked transparent—flat opaque exports are a failure, not a style choice.
Batch Acceptance Checklist
Run the same steps on a remote Mac mini M4 so laptop Figma sessions stay responsive and CI matches local QA. Apple Silicon makes sips, identify, and small Python validators cheap at hundreds of files.
- Manifest parity: exported file count matches the slice list; no duplicates or missing scales.
- Geometry gate: each PNG width and height equals logical frame pixels multiplied by the scale factor with zero tolerance.
- Alpha probe: for transparent specs, sample alpha histograms or spot-check in Preview at 400% for accidental halos from nested opacity.
- sRGB gate: sample ICC or colorspace tags with ImageMagick or exiftool and compare to README; fail the batch on first drift unless a named exception folder exists.
- Naming lint: enforce prefix, state suffix,
@2xtoken, and banned characters via a short shell script. - Byte ceiling: optional per-SKU
max_bytes; if compression is allowed, document pngquant or oxipng version beside the manifest. - Audit log: append sha256, tool versions, and pass or fail to JSONL, then move only passing files into
out/for engineering pickup.
When you chain folder watches or agents, reuse the logging style from other MacPng playbooks so operators can grep one field across projects. The goal is simple: if the script is green, design agrees the raster contract is met—no screenshot debates.
FAQ
Does Dev Mode show the same pixels as production? It is a close approximation, not a ground truth. Always judge the exported PNG at 100% in a neutral viewer and in the target browser with CSS logical sizes applied.
Should designers read CSS from Dev Mode directly into code? Use it as a hint, then round to your agreed spacing grid. Copying fractional values into layout systems that snap differently on each platform recreates the one-pixel errors you are trying to eliminate.
How do annotations interact with automated watchdogs? Overlays usually stay out of raster exports, but zip pipelines that rasterize entire frames can accidentally include markup layers. Keep watchdog inputs pointed at the component slice folder, not full-screen captures.
Next steps
The Tech Insights index, MacPng homepage, pricing and nodes, and help center are all readable without logging in, so stakeholders can align on packages before anyone creates an account.
Pin export and QA to one Apple Silicon node
Freeze Dev Mode presets, run batch gates on an M4 mini, and ship PNG slices that pass engineering the first time.