Export Multi‑Resolution Assets from Illustrator with Export for Screens

Problem

UI teams need a single source file that can produce PNG, SVG, PDF, and JPG assets at 1×, 2×, 3× (and custom) scales, organized into predictable folders. Manually resizing artboards or exporting each format separately is error‑prone and slow.

Useful takeaway

Illustrator’s Export for Screens dialog (Window → Export for Screens) can generate all required resolutions and formats in one pass, provided the document is set up correctly. The workflow below produces a verified, production‑ready asset set and highlights the most common pitfalls.

Prerequisites

• Illustrator 2020 or later (the feature was added in CC 2019 but stabilized in 2020).
• Document color mode set to RGB (File → Document Color Mode → RGB Color).
• Artwork organized either:
  • On separate artboards (one artboard per component), or
  • As named layers/groups in the Asset Export panel (Window → Asset Export).
• Fonts either activated in the system or converted to outlines if SVG text editability is not required.

Step‑by‑step procedure

1. Open the dialog: Choose Window > Export for Screens (or File > Export > Export for Screens).
2. Select source:
   • Artboards tab – check the artboards you want to export. Use Shift‑click or Cmd/Ctrl‑click for multi‑select.
   • Assets tab – drag layers/groups into the panel, give each a unique name (this becomes the file name).
3. Choose formats: Under Formats click + and add PNG, SVG, PDF, and/or JPG. Each format gets its own column of options.
4. Set scale factors: In the Scale row add 1x, 2x, 3x (or any custom factor like 1.5x). The same scales apply to every selected format in a single export pass.
5. Configure format‑specific options:
   • PNG – enable Transparent Background if the artboard has no fill.
   • SVG – choose Font → Convert to Outlines unless you need editable text and have a license that permits embedding. Enable Minify to strip Illustrator namespaces.
   • PDF – set Compression to Automatic (JPEG) for raster content, ZIP for vector.
   • JPG – set quality (80‑90 is typical for UI).
6. Define export location & naming: Click the folder icon next to Export to. Use a root folder (e.g., /exports/ios). In Prefix/Suffix add a scale suffix like @2x – Illustrator will automatically append @1x, @2x, @3x based on the scale row.
7. Export: Press Export Artboards (or Export Assets if you used the Assets tab). Illustrator writes a sub‑folder per scale (e.g., 1x/, 2x/) containing the chosen formats.

Concrete example

Assume a 375 × 812 pt artboard named LoginScreen. After the steps above with PNG + SVG at 1x/2x/3x, the folder structure looks like:

/exports/ios/
  1x/
    LoginScreen.png   (375 × 812 px)
    LoginScreen.svg   (viewBox="0 0 375 812")
  2x/
    [contact removed] (750 × 1624 px)
    [contact removed] (viewBox="0 0 375 812" – vector, no raster scaling)
  3x/
    [contact removed] (1125 × 2436 px)
    [contact removed] (same viewBox)

Notice the SVG files share the same viewBox because they are resolution‑independent; only the PNGs change pixel dimensions.

Verification checklist

• Open a PNG in a browser → right‑click → Inspect → check naturalWidth/naturalHeight matches artboard × scale.
• Inspect SVG source (any text editor): confirm viewBox equals the artboard size, width/height are omitted or set to 100%, and no <image> tags reference external rasters unless you intentionally embedded them.
• Color consistency: Use a color picker (e.g., macOS Digital Color Meter) in sRGB mode on the original artboard and on the exported PNG; values should match within 1‑2 units.
• Transparency: Place the PNG over a patterned background in a browser; no white matte should appear.

Limitations & cautions

• Bleed ignored – Export for Screens crops to the artboard edge. Extend artwork to the edge or add manual bleed before exporting.
• SVG raster handling – Linked raster images are embedded at their original pixel dimensions, not scaled. Place linked images at the highest target resolution (e.g., 3×) or embed them after scaling in Illustrator.
• Uniform scales per pass – You cannot assign 2× to PNG and 3× to SVG in one run. Run the dialog twice with different scale sets if you need divergent scales.
• Font licensing – Embedding fonts in SVG/PDF may violate EULAs. Outline text or verify the license before distribution.
• Memory pressure – Hundreds of artboards or complex assets can freeze Illustrator. Export in batches (select 20‑30 artboards at a time) or use a JSX script to automate sequential exports.

Recovery / re‑export

If any asset is missing or incorrect, reopen Export for Screens – the dialog retains the last used settings per document. Adjust artboard bounds, rename assets, or tweak format options, then click Export Artboards again. For a single‑file fallback, use File > Export > Export As and pick one format/scale.

Automation hint (optional)

For CI pipelines, a small JSX script can drive Export for Screens across multiple .ai files:

// exportAll.jsx
var folder = Folder.selectDialog("Select folder with .ai files");
var files = folder.getFiles("*.ai");
for (var i = 0; i < files.length; i++) {
  var doc = app.open(files[i]);
  var exportOptions = new ExportForScreensOptions();
  exportOptions.artboards = "all";
  exportOptions.formats = [
    {format: "PNG", scales: [1,2,3], transparent: true},
    {format: "SVG", scales: [1], fontType: SVGFontType.OUTLINEFONT}
  ];
  exportOptions.destination = Folder(doc.path + "/exports");
  doc.exportForScreens(exportOptions);
  doc.close(SaveOptions.DONOTSAVECHANGES);
}

Run via osascript -e 'tell application "Adobe Illustrator" to do javascript file "exportAll.jsx"' on macOS (requires Illustrator scripting permission). Test on a single file first.

Final sanity check

Before handing off to developers, zip the export root folder and run a quick script (Node, Python, or shell) that verifies every expected @1x, @2x, @3x file exists and that PNG dimensions equal artboardWidth * scale. This catches missing scales early.