Adobe XD 26 for Plugin Developers

Kerri Shotts
Jan 29 · 5 min read

With the release of Adobe XD 26, there’s lots of new things for users and developers alike, including:

  • Content-aware layout (for end users)
  • Drag and Drop APIs
  • Polygon.starRatio property
  • and an advanced debugger for plugin developers for those moments when the developer console just isn’t quite enough.

The Content-aware layout feature is specifically for end users at the moment — it doesn’t impact plugin APIs, but you’ll definitely want to take advantage of this feature in your own XD designs.

Polygon.starRatio

In Adobe XD 26, you can now create stars and other interesting shapes by controling the “star ratio” setting. In the property inspector, it’s directly adjacent to the number of edges and the roundness of each corner.

This feature is also available to your plugins as a starRatio field on any shape that’s a Polygon. To create something that could be used for a “New!” sticker shape, for example, you could write the following code:

const { Polygon, Color, selection } = require("scenegraph");const aStar = new Polygon();
aStar.width = 200;
aStar.height = 200;
aStar.cornerCount = 50;
aStar.setAllCornerRadii(0);
aStar.fill = new Color("#EA793D");
aStar.strokeWidth = 2;
aStar.stroke = new Color("#644428");
selection.insertionParent.addChild(aStar);

… which results in the following shape:

Drag and Drop

This is huge. Your plugin can now feel even more at home with Adobe XD by allowing your users to drag content from your plugin’s panel into their document!

The API itself generally follows the HTML5 Living Standard for Drag and Drop. If you’re already familiar with this standard, you’ll be able to create plugins that utilize drag-and-drop in no time. If you’re not familiar, no worries! We created a sample that demonstrates exactly how to take advantage of these APIs.

To make an item draggable in your panel, you’ll need to set the draggable attribute to true. This lets XD know that the element may be dragged out by the user in the future.

<img src="path-to-image.png" draggable="true" />

Note: In a web browser, some elements (like images) are automatically draggable. This is not the case for XD. If you want an image to be draggable, you’ll have to be explicit about it.

Setting the draggable attribute isn’t quite enough, however — you also need to provide a dragstart event handler. This handler sets up the drag and drop operation by providing important data about the item being dragged by calling dataTransfer.setData on the incoming drag event. For example:

draggableElement.addEventListener("dragstart", evt => {
evt.dataTransfer.setData("text/uri-list", uriList.join("\n"));
});

For XD, you can only specify the following kinds of data:

  • Bitmap images
  • SVG content
  • Text

XD understands both path references (you can get these using File.nativePath) and base64-encoded data URIs.

When the user finishes the drag and drop operation, XD will react in the same manner as if you’d dragged the same file or files from the file system. Depending on the target, XD might populate a repeat grid’s image data, or it might add the images to the canvas directly. It’s important to note that a plugin has no control over how XD responds to the drop.

There are a few important limitations you need to be aware of with this feature:

  • Dragging content onto your plugin’s UI is not supported.
  • Drag and drop does not allow the drag and drop of files, like in the browser.
  • Dragging content from the XD canvas or other XD surfaces to your plugin’s UI is not supported.
  • XD only understands the text/uri-list mime type.
  • The drag and dragexit events are not currently supported. These aren’t required for most scenarios, however, but support will be coming in a future release.
  • The data for the drag is set at dragstart and cannot be modified. This means that you must provide XD with the full-resolution image in advance of the drag and drop operation. If you’re trying to drag a thumbnail of an image, the data will need to be the full-resolution version. We’ll be adding the capability of providing additional data at the time of the drop in a future release.

Advanced Debugging Support (Beta)

Sometimes debugging a plugin can be hard — if only you could set a breakpoint at a specific line and then step through what the plugin is actually doing, right?

In XD 26, we’ve enabled beta support for Chrome Developer Tools, which comes with a robust debugging experience. This support is far from perfect (which is why it’s in beta), and will change substantially in the future as we roll out an improved developer tooling experience around Adobe applications that support UXP-based plugins.

For now, though, you can do the following:

  • Set and edit breakpoints.
  • Step into, through, and over code.
  • Inspect the values of any variables in your current scope.
  • Interact with the JavaScript context using the Console panel to inspect variables and run code.
  • View and edit the HTML DOM of your plugin’s UI.

To use this feature, you must use Google Chrome, and you must configure your plugin for debug mode by adding a debug.json file to your plugin’s root directory. Assuming your plugin is in XD’sdevelop folder, your plugin will be debuggable. For more information on how to configure this, please see our documentation.

There are quite a few caveats when using debugging, especially if you are working on a document that has live editing enabled or if you try to interact with XD while your plugin is being debugged. Check our documentation for the full set of known issues. Be absolutely sure you understand the risks before debugging your plugin.

Also note — we’re not soliciting feedback about the developer tooling just yet as we’re working on a much improved experience to be released in the future. But we didn’t feel like we wanted to hold off on releasing this particular functionality any more, given the increase in plugin complexity and capabilities.


Whew! That was a lot of stuff! If you have any questions or comments, feel free to let us know in the Adobe XD Platform Forums.

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Kerri Shotts

Written by

JavaScript fangirl, Technical writer, Mobile app developer, Musician, Photographer, Transwoman (she/her), Atheist, Humanist. All opinions are my own. Hi there!

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade