Designers, ops, and front-end teams who batch-export PNGs on a remote Mac from Sketch or Figma often hit the same walls: wrong pixel sizes, inconsistent filenames, and color or resolution surprises. This guide gives you a step-by-step checklist and validation list so you can lock in size standards and naming conventions, then run exports with confidence.
Table of Contents
Why Size and Naming Standards Affect Delivery Efficiency
Inconsistent export sizes and filenames force rework: front-end has to resize or rename assets, design has to re-export, and version control gets messy. When everyone follows the same size and naming rules—especially when exporting on a remote Mac used by multiple people—handoff is faster, automation (e.g. scripts or design systems) works reliably, and QA has a clear checklist. Defining @1x/@2x/@3x up front and a single naming pattern (prefix/suffix/slice rules) turns batch PNG export into a repeatable, scalable process.
Sketch/Figma Batch Export PNG: Common Settings Comparison
Both tools support batch PNG export; the dialogs differ. Align these so outputs are interchangeable and predictable.
| Setting | Sketch | Figma |
|---|---|---|
| Format | PNG (32-bit for transparency) | PNG (export with transparency) |
| Scale | 1x, 2x, 3x in Make Exportable | 1x, 2x, 3x in Export settings |
| Color profile | Document / sRGB; embed in export | sRGB (embed in export) |
| Naming | Layer name + suffix (e.g. @2x) | Frame/layer name + scale suffix |
| Batch | Export All / Export Selected | Export selection or entire page |
On a remote Mac, use one tool (or one export pipeline) per project so filenames and scales stay consistent. Set document color to sRGB and “embed profile” in both apps before batch export.
@1x / @2x / @3x and Size Standards Table
Design canvas is usually @1x (logical points). Export scales define the actual pixel dimensions. Use this as your validation reference.
| Scale | Use case | Pixel size (example: 100×100 pt) |
|---|---|---|
| @1x | Standard density, legacy assets | 100×100 px |
| @2x | Retina / HiDPI (common default) | 200×200 px |
| @3x | High-DPI mobile, large displays | 300×300 px |
Checklist: (1) Agree with dev/product on which scale(s) to deliver. (2) In Sketch/Figma, enable only those scales in the export preset. (3) After export, spot-check one asset’s pixel dimensions (e.g. with Preview or sips on Mac) against this table.
Naming Conventions (Prefix, Suffix, Slice Rules) and Validation Points
Stable naming makes automation and handoff reliable. Define and validate the following.
- Prefix: e.g.
icon_,btn_, ormodule_. Use one prefix per asset type so scripts and design systems can filter. - Suffix: Scale suffix is standard:
@1x,@2x,@3x(or_1x,_2x,_3xif your pipeline expects underscores). Keep it consistent across Sketch and Figma. - Slice / layer names: Name artboards or layers so the export filename is meaningful (e.g.
icon_home→[email protected]). Avoid spaces and special characters; use lowercase and underscores.
Validation: After batch export, run a quick check: (1) All filenames use the agreed prefix/suffix pattern. (2) No duplicate base names for the same scale. (3) File count matches expected (e.g. 3 scales × N assets).
Executable Steps and Recommended Workflow
Use this sequence on your remote Mac so every batch is repeatable.
- Set document standards: Canvas in points @1x; color mode RGB; color profile sRGB, embedded.
- Define export preset: PNG, 32-bit if transparency needed; enable only @1x, @2x, and/or @3x per project.
- Name layers/frames: Apply prefix + descriptive name (e.g.
icon_close); tool will append scale suffix. - Export batch: Use “Export all” or “Export selection” to a single output folder.
- Validate: Check one file’s pixel size and filename; then scan folder for naming and count.
- Deliver: Zip or upload from the same folder so front-end gets one consistent set.
Common Export Color Shift and Resolution Problems
Two frequent issues after batch PNG export:
- Color shift: Different gamma or profile between design app and web. Fix: export in sRGB and embed the profile; avoid “document profile” unless the document is sRGB. On a remote Mac, keep one color pipeline (macOS + same app version) for all exports.
- Wrong resolution or blur: Export scale set to 1x when 2x was expected, or canvas in pixels instead of points. Fix: set canvas in points @1x; choose 2x/3x in the export dialog and verify one file’s pixel dimensions. If using a remote Mac, confirm display scaling doesn’t change the “logical” canvas size in the app.
Quick check: open one exported PNG in a browser or another app on a different device; if color or sharpness looks off, re-export with sRGB embedded and correct scale.
Use a Remote Mac for Consistent Sketch/Figma Batch PNG Export
Lock in size and naming standards on a dedicated remote Mac: same environment for the whole team, no local machine variance, and predictable @1x/@2x/@3x output. Rent a Mac mini M4 by the month, connect via SSH or VNC, and run batch exports without tying up your workstation.