Sync and Async

XD plugin APIs support both synchronous and asynchronous code (commonly referred to as sync and async).

Below, we'll talk a little about the difference, and what it means for your XD plugins.

Note: "Sync vs async" is a topic frequently covered in JavaScript tutorials and articles around the web. For a broader introduction, consult your favorite search engine.

Synchronous code

When you write synchronous code, your code is executed line by line.

Here's an example:

const newElement = new Rectangle();
newElement.width = 100;
newElement.height = 50;
newElement.fill = new Color("Purple");
Copied to your clipboard
const newElement = new Rectangle();
newElement.width = 100;
newElement.height = 50;
newElement.fill = new Color("Purple");

Asynchronous code

XD plugins also support asynchronous code with both Promises and async/await. Some XD plugin APIs are asynchronous in nature. You can also create your own Promises as you would in any JavaScript environment.

Here's an example using the File API and Promise syntax:

function sayHello(selection, documentRoot) {
  return fs.getFileForSaving().then((file) => {
    return file.write("Hello, world!");
  });
}
Copied to your clipboard
function sayHello(selection, documentRoot) {
  return fs.getFileForSaving().then((file) => {
    return file.write("Hello, world!");
  });
}

Here's that same example using async/await syntax:

async function sayHello(selection, documentRoot) {
  let file = await fs.getFileForSaving();
  file.write("Hello, world!");
}
Copied to your clipboard
async function sayHello(selection, documentRoot) {
  let file = await fs.getFileForSaving();
  file.write("Hello, world!");
}