I need to first export all selected artboards (their children) in an async manner.
Can anyone help me out with this?
much appreciated!
Edit:
Further on after the exports are done I’d like to upload them to amazon s3.
Edit: Can I also see each child’s groupname have a group name?
@stevekwak Help appreciated!
Try this
const application = require("application");
const fs = require("uxp").storage.localFileSystem;
async function exportRendition(selection) {
const folder = await fs.getFolder();
const arr = await selection.items.map(async item => {
const file = await folder.createFile(`${item.guid}.png`);
let obj = {};
obj.node = item;
obj.outputFile = file;
obj.type = "png";
obj.scale = 2;
return obj
})
const renditions = await Promise.all(arr);
await application.createRenditions(renditions)
}
module.exports = {
commands: {
exportRendition
}
};
It’s exporting all artboards like this, not their child elements as induviduals. (image attached below)
I suppose you have to do the same for all children, like scenegraph.root.children.map, them the same of all nested children and so on. Classic tree walk ![]()
Can you give me some example how i can do that.
My data looks like this
Artboard ('ui') {
width: 1920, height: 1080
global X,Y: -20, 0
parent: RootNode
children: [Rectangle, Rectangle, Rectangle, Rectangle, Rectangle]
fill: ffffffff
}
Sure, if you task is that straight forward - just export children of specific artboard then exportRendition function should be updated a bit:
const folder = await fs.getFolder();
const scenegraph = require(“scenegraph”);
const artboard = scenegraph.root.children.filter(ab => ab.name === “Name of your artboard”);
const arr = await artboard.children.map(async …
and rest of the function goes here.
Or if you need to export elements from only selected artboards:
const folder = await fs.getFolder();
const scenegraph = require(“scenegraph”);
const artboards = selection.items.filter(node => node instanceof scenegraph.Artboard);
const arr = await artboards.reduce(async (all, ab) => {
const currentTask = ab.children.map(async item => { const file … return obj; });
const current = await Promise.all(currentTask);
return all.concat(current);
}; [ ]);
…
Code might contain some errors as I didn’t run it.
Thanks a ton for the reply. The code seems to be not working, has some syntax errors.
Can you please explain at the end of the code what’s this for?
}; [ ]);
sorry, of course it should be }, [ ]); I just can’t find how to format code here. So in general it’s the of reduce function which looks like collection.reduce(async (all, current) => {…}, [ ]); where final [ ] is an initial value.
@gdreyv the code is working fine with a single artboard.
but when selected two artboards it gives this error:
Plugin TypeError: all.concat is not a function
at artboards.reduce (C:\Users\Saud\AppData\Local\Packages\Adobe.CC.XD_adky2gkssdxte\LocalState\develop\draftxr-react\main.js:35175:14)
The code looks like this:
async function exportRendition(selection) {
const folder = await fs.getFolder();
const artboards = selection.items.filter(node => node instanceof scenegraph.Artboard);
const arr = await artboards.reduce(async (all, ab) => {
const currentTask = ab.children.map(async item => {
const file = await folder.createFile(`${item.guid}.png`);
let obj = {};
obj.node = item;
obj.outputFile = file;
obj.type = 'png';
obj.scale = 2;
return obj;
});
const current = await Promise.all(currentTask);
return all.concat(current);
}, []);
const renditions = await Promise.all(arr);
await application.createRenditions(renditions);
}
const folder = await fs.getFolder();
const artboards = selection.items.filter(node => node instanceof scenegraph.Artboard);
const arr = await artboards.reduce(async (all, ab) => {
const currentTask = ab.children.map(async item => {
const file = await folder.createFile(`${item.guid}.png`);
let obj = {};
obj.node = item;
obj.outputFile = file;
obj.type = 'png';
obj.scale = 2;
return obj;
});
const current = await Promise.all(currentTask);
return (await all).concat(current);
}, []);
const renditions = await Promise.all(arr);
await application.createRenditions(renditions);
You the man…it’s working!

