Exporting Artboards to a Single Image File

Adobe XD UXP Plugin API
1

I’ve been trying to export an XD file’s artboards as a single image file like PNG programmatically just like when you export it using File>Export in XD. I found this working code snippet on this forum where it exports each item in an artboard as a PNG http://forums.creativeclouddeveloper.com/t/how-to-export-all-children-of-all-selected-artboards-in-an-async-manner/819/13. I couldn’t figure out on how to export them all as a single PNG. I’d highly appreciate it if I can get any help. It’d be nice if I can control the size so it can look like a thumbnail.

2

To generate a single PNG containing all of the artboards (the whole canvas), set the node property of the rendition options to the document root. If you want the PNG smaller, set the scale property to something less than 1:

const application = require("application");
const scenegraph = require("scenegraph");
const lfs = require("uxp").storage.localFileSystem;


async function exportAllArtboardsAsPNG() {
    let tempFolder = await lfs.getTemporaryFolder();
    let fileRendition = await tempFolder.createFile("rendition.png", { overwrite: true });

    const renditionOptions = [
        {
            node: scenegraph.root,
            outputFile: fileRendition,
            type: application.RenditionType.PNG,
            scale: .2
        }
    ];

    try {
        let renditionResults = await application.createRenditions(renditionOptions);

        for (let i = 0; i < renditionResults.length; i++) {
            console.log("created rendition " + (i + 1) + ": " + renditionResults[i].outputFile.nativePath);
        }
    } catch (err) {
        console.log("rendition error: " + err);
    }
}

I hope this helps.

1 Like
3

Thank you so much. I should’ve tried scenegraph.root. Turned out to be simpler than I thought. Thanks a lot, @DavidXD

1 Like