Scripting Illustrator Asset Exports: A Technical Case for .jsx Over Manual Artboards

The 60-artboard handoff problem

You have a single .ai file with sixty artboards: every icon state at three sizes, in two color themes. Engineering needs PNG and SVG sets for the component library. Using the Asset Export panel, you drag each artboard into the export queue, pick scales, and click. It works—until you miss a state, misname a file, or the designer reorders artboards the night before the release. The useful takeaway is not that scripts are magic; it is that a small JavaScript file can turn a manual, error-prone chore into a repeatable command, provided you treat the script as production code rather than a one-off hack.

Artboards and Asset Export: where the GUI stops scaling

An artboard is a named rectangular region inside an Illustrator document. The Asset Export panel lets you collect artboards and assign output formats and scale factors visually. For a handful of static variations, this is faster than writing code. The panel falls behind when you need conditional logic: skip disabled states, rename outputs based on layer metadata, or enforce a naming convention that matches the engineering repo. At that point you are no longer designing; you are repeating a data-entry task.

A scripted export pattern that uses names, not indices

Illustrator ships with a JavaScript dialect (often called ExtendScript) that exposes the document as a tree of objects—the DOM, or Document Object Model. You can read artboard names, set the active artboard, and invoke export methods. The script below lives in your user-level Scripts folder and runs against the open document via File > Scripts. It reads artboard names rather than numeric indices, because indices shift whenever a designer adds or removes a board. The loop structure—naming, scaling, and format iteration—is the durable part; the exact export call is the piece most likely to vary by Illustrator version.

// batch_export.jsx
// Place in Illustrator's user Scripts folder, then run via File > Scripts.
// Test on a copy of your .ai file first.

var doc = app.activeDocument;
var outputFolder = Folder.selectDialog("Choose export destination");
if (!outputFolder) throw new Error("Export cancelled: no output folder selected.");

var config = {
  scales: [1, 2, 3],
  formats: ["PNG", "SVG"],
  namePattern: "{artboard}@{scale}x.{ext}"
};

function safeName(str) {
  return str.replace(/[^\w\-]/g, "_");
}

for (var i = 0; i < doc.artboards.length; i++) {
  var ab = doc.artboards[i];
  var baseName = safeName(ab.name);
  doc.artboards.setActiveArtboardIndex(i);

  for (var f = 0; f < config.formats.length; f++) {
    var fmt = config.formats[f];
    for (var s = 0; s < config.scales.length; s++) {
      var scale = config.scales[s];
      var fileName = config.namePattern
        .replace("{artboard}", baseName)
        .replace("{scale}", scale)
        .replace("{ext}", fmt.toLowerCase());
      var file = new File(outputFolder.fsName + "/" + fileName);

      // Export invocation: confirm the exact API for single-artboard export
      // in your Illustrator version's scripting reference. Some builds
      // require document-level options or temporary documents to isolate
      // one artboard.
      if (fmt === "PNG") {
        var opts = new ExportOptionsPNG24();
        opts.antiAliasing = true;
        opts.transparency = true;
        doc.exportFile(file, ExportType.PNG24, opts);
      } else if (fmt === "SVG") {
        var svgOpts = new ExportOptionsSVG();
        svgOpts.embedAllFonts = false;
        doc.exportFile(file, ExportType.SVG, svgOpts);
      }
    }
  }
}
alert("Batch export finished. Verify output in " + outputFolder.fsName);

Run this from the Scripts menu after placing the file in the user scripts directory. The script needs write access to the destination folder you choose. After it finishes, check three things: the file count matches artboards × scales × formats, every filename contains the sanitized artboard name, and at least one PNG opens at the expected pixel dimensions. If a font is missing on your workstation, the SVG may substitute glyphs—open one file and search for unexpected font names.

Trade-offs: fragility, learning curve, and version drift

Scripts are tightly coupled to document structure. If a designer renames layers, changes the color mode from RGB to CMYK, or adds a clipping mask that the export options ignore, the output can silently degrade. Illustrator’s Asset Export panel applies some effects automatically; a script may not unless you explicitly configure raster effect settings and color handling. There is also a learning curve: the Illustrator DOM is idiosyncratic, and debugging a .jsx file offers less tooling support than modern JavaScript environments.

Adobe has been evolving its extensibility model, moving some automation surfaces toward newer architectures. That means the exact export API, file paths, and supported object properties can differ between Illustrator versions. A script that works in one build may need adjustment in the next. For teams with highly templated content—say, business cards that change only by name and title—Illustrator’s built-in Variables and Data-Driven Graphics may be simpler than maintaining a script repository. Scripts win when you need conditional logic, external data, or batch operations across many unrelated files.

A practical pilot before you commit

Do not run a new export script on the master file. Copy the .ai document, run the script against the copy, and compare the output side-by-side with a manual Asset Export of the same artboards. If the pixels match and the naming convention holds, promote the script to a shared repository with a version note recording the Illustrator build it was validated against. If they do not match, inspect color mode, raster effects, and font availability before touching the code. That pilot takes minutes and prevents a broken handoff from reaching the engineering repo.