XD 26 release - debugging & drag/drop APIs

Adobe XD UXP Plugin API
,
1

XD 26 is here with some exciting new features for plugin developers!

  • Drag & drop support

    • Enable users to drag image/text content from your plugin panel UI into the XD document.
    • Enable arbitrary drag/drop gestures that are fully contained within your plugin UI.
    • Not yet supported: Dragging content onto your plugin from an outside source (e.g. dropping files on your plugin UI, or dragging images from another app into your plugin).
    • See the drag/drop API release notes or our drag/drop sample code.
    • Don’t forget to update your plugin’s minVersion if you are going to rely on drag & drop features.

  • Plugin debugging (beta) – use the Chrome DevTools UI (CDT) to debug your plugin

    • XD may be unstable while debugging. Don’t debug when you have important XD files open.
    • Sources tab – Set breakpoints, pause & stop through code, inspect the values of variables.
    • Console tab – View objects and run code in the Console view.
      • Warning: Console does not show all messages reliably yet. Use XD’s Developer Console view as a backup.
    • Elements tab – View and edit the DOM structure of your plugin’s UXP UI, and view some CSS.
      • Warning: many other features in Elements do not work yet.
    • Other CDT features do not work correctly yet.
    • Read the plugin debugging tutorial to learn how to enable debugging.

Further reading

As always, let us know what you think, and tell us all about what you’re building!

3

The drag&drop feature works great with image and txt files.

But, is it possible to simply drag a text, say a div’s content, into the Scenegraph without using external txt files?
Further, it seems that ondragend() is not a supported UI event, since the error in the console when trying to edit the text node created on the Scenegraph.

4

Hi Paolo —

So, for this first version of drag-and-drop, the plugin has no control over how XD interprets the drop. Essentially, XD is just doing the same thing it does when a file is dropped from an external source.

We’ve got the ability to modify the scenegraph when the drop finishes in the backlog, but I have no date yet when it’ll be done. Essentially, though, you’d be able to register a callback of some sort (a bit like editDocument) and create a new text element that contained the text in the scenegraph.

5

So you can’t just supply some text (not from a file) as the drop source?

6

Let’s say you have an image of button in your panel that is draggable. If a user drags and drops that on the scenegraph can you then add a rectangle node, text node and group to where the user drops? Or is that what is planned in the backlog?