Batch Export Artboards and Symbols with Illustrator's Asset Export Panel

The Problem: Manual Export Doesn't Scale

Design systems, icon libraries, and responsive UI kits often require dozens of assets at multiple scales and formats. Exporting each artboard individually through File > Export introduces naming drift, scale inconsistencies, and folder chaos. Illustrator's Asset Export panel solves this by treating export as a document-level configuration rather than a per-file action.

Prerequisites: Prepare the Source Document

Before opening the panel, structure the .ai file so Asset Export can auto-populate correctly:

• Name every artboard in the Artboards panel (Window > Artboards). Use kebab-case or snake_case — these become filenames.
• Keep artboard dimensions consistent within each export group. Mixed sizes produce unexpected bounding boxes in SVG/PDF.
• Set Document Color Mode (File > Document Color Mode) to RGB for screen assets or CMYK for print. Changing this after export shifts colors in raster output.
• Resolve linked images and fonts (Window > Links, Type > Find Font). Missing links render as placeholders; missing fonts substitute silently.
• Version note: Asset Export appeared in CC 2015. SVG minification and per-asset scale presets arrived in CC 2019. CC 2024+ moves some controls under Export for Screens but the panel remains functional.

Procedure: Configure and Run a Batch Export

1. Open the Panel and Populate Assets

Choose Window > Asset Export. The panel lists three tabs: Artboards, Layers, Symbols. Click the + icon or drag items from the canvas/layers panel into the list. Use Auto-populate from Artboards (panel menu) to add all named artboards at once.

2. Define Export Settings per Asset

Select one or more rows. In the right column, add Scale + Format presets:

• 1x PNG — 72 ppi, transparent background, for web.
• 2x PNG — 144 ppi, for @2x displays.
• SVG — check Minify, Responsive (removes width/height), Decimal: 3.
• PDF — Preserve Illustrator Editing Capabilities off for smaller files.

Each preset creates a suffix: icon-home.png, [contact removed], icon-home.svg.

3. Choose Destination and Export

Click the folder icon at panel bottom. Pick or create a target directory — e.g., /assets/icons/. Press Export. Illustrator writes every asset/preset combination into that folder, preserving subfolder structure if you organized assets into groups.

Concrete Example: Icon Set at Three Scales

Document: ui-icons.ai with 24 artboards named icon-home, icon-search, icon-settings, each 24×24 pt.

1. Open Asset Export → Auto-populate from Artboards (24 rows appear).
2. Select all rows → Add three presets: 1x PNG, 2x PNG, 3x PNG.
3. Set folder to ../build/icons/.
4. Export.

Result: 72 files (icon-home.png, [contact removed], [contact removed], …) each 24×24, 48×48, 72×72 px respectively. SVG not needed here but would add icon-home.svg at native 24×24 pt.

Expected Checks After Export

• File count matches assets × presets (24 × 3 = 72).
• Naming follows <artboard-name><suffix>.<ext> with no spaces or parentheses.
• Dimensions — open a sample in Preview/Finder: Get Info shows 48×48 for @2x.
• Transparency — drag a PNG onto a colored background; no white matte.
• SVG validity — open in browser or run svgo --input=icon-home.svg --output=test.svg; no parse errors.

Recovery and Iteration

Asset Export is non-destructive; the .ai file remains the source of truth.

• Re-export changed assets: Rename an artboard, resize one, or add a preset → press Export again. Only modified rows rewrite files (timestamp updates).
• Undo artboard edits: Edit > Undo or Window > Document History to revert a mistaken resize before re-export.
• Regenerate from master: Keep the .ai with all symbols/artboards embedded. If a PNG is deleted, reopen the .ai and export that row alone.

Limitations and Gotchas

• Document-specific settings: Export presets live in the .ai file. They don't sync across documents without manual copy/paste of the asset list.
• Color mode mismatch: Exporting RGB artboards from a CMYK document desaturates PNGs. Verify mode before first export.
• Linked assets: A placed Photoshop file that's offline exports as a low-res proxy. Relink before batch runs.
• SVG font handling: Text converted to outlines (Type > Create Outlines) exports cleanly; live text embeds font subsets, bloating SVG size.
• Panel layout drift: CC 2024+ hides Minify under a disclosure triangle; older versions show it inline.

Quick Verification Checklist

1. Open the export folder in list view; sort by name — confirm suffix pattern.
2. Spot-check three files: one PNG, one @2x PNG, one SVG.
3. In Illustrator, rename icon-home to icon-home-filled, re-export, verify only that row's files update.

If all three pass, the pipeline is reliable for CI/CD handoff or developer delivery.