Batch Export UI Assets with Illustrator’s Export for Screens

Desired outcome

Generate multiple asset versions (e.g., 1×, 2×, 3× PNG and SVG) from selected artboards using a consistent naming scheme and folder structure, ready for hand‑off to developers or design systems.

Prerequisites

• Adobe Illustrator CC 2019 or later (any recent version that includes Export for Screens).
• A document containing clearly named artboards you wish to export.
• Write permission on the destination folder where assets will be saved.
• Sufficient free disk space; each scale factor multiplies the output size.

Procedure

1. Open Export for Screens: Choose File > Export > Export for Screens….
2. Select artboards: In the dialog, click the Artboards tab. Use Shift‑click to pick multiple artboards or click Select All Artboards.
3. Define formats and scales: Switch to the Formats tab. Click the + button to add a format (e.g., PNG). Set the scale(s) you need (1, 2, 3). Repeat for SVG if required.
4. Set naming convention: Keep the default {Artboard Name}_{Scale}.{Extension} or customize using the Name field.
5. Choose destination: Click the folder icon next to Location and navigate to (or create) the target directory, e.g., /projects/myapp/assets/export/.
6. Export: Press Export Artboard. Illustrator will process each selected artboard for every format/scale combination.

Expected checks

• Open the destination folder and verify that subfolders are not created; files appear directly in the chosen location.
• Confirm each file follows the pattern <ArtboardName>_<Scale>.<Extension> (e.g., Button_2x.png).
• For a PNG at 2× scale, open it in an image editor and check that pixel dimensions equal the artboard width × 2 and height × 2.
• For SVG files, view the source and ensure a proper viewBox attribute matching the artboard size; verify no unexpected raster embeds unless you intentionally included them.

Recovery options

• If some files are missing, check for hidden or locked layers that might prevent export; unlock or show them and retry.
• Ensure artboard names contain only filesystem‑safe characters (no :/\*?"<>|). Rename problematic artboards and re‑export.
• If Illustrator becomes unresponsive, quit the application, then relaunch and try exporting a smaller batch (e.g., half the artboards) to reduce RAM usage.
• To reset any corrupted export preferences, go to Edit > Preferences > File Handling & Clipboard and click Reset Preferences on restart.