Edit in GitHubLog an issue

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:

Copied to your clipboard
1const newElement = new Rectangle();
2newElement.width = 100;
3newElement.height = 50;
4newElement.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:

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

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

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

We recommend async/await syntax over Promises.

Was this helpful?
Copyright © 2021 Adobe. All rights reserved.