XD 21 Plugin API Updates: Panel Plugins and UXP 3.1
Update 07/22/2019: Be sure to read through our list of bugs and known issues on our developer forums.
We are excited to announce the biggest update for XD plugin developers since the launch of XD plugins! In XD 21, we have added a new UI entry point, panel UI, and released a new version of UXP, the technology that powers common API surfaces like plugin UI, network APIs, and more. I will cover each of the following in this blog post:
- What is “Panel UI”?
- Differences between panel and modal plugins
- What to expect in UXP 3
- What’s coming next
These updates create new opportunities for our plugin developers by enabling them to create new kinds of plugins that were previously impossible to build. Users will benefit greatly since XD plugins are now more convenient than ever to discover, access, and use. Let’s get into the details!
What is “Panel UI”?
In the last update, we introduced the “Plugins Panel” which is a new area on the left side of XD where a user can access and interact with plugins directly. In XD 20, the Plugins Panel simply served as a launcher for existing modal plugins. Starting in XD 21, plugin developers now have the option to display UI directly within the Plugins Panel.
As you can see above, panel-based plugins can stay open while the user works on the document. Plugins can also “listen” for document changes and display dynamic contents in the UI. We have created a new documentation section for this on our docs site for you to learn more about panels.
Differences between a panel and a modal
What’s the difference between a modal plugin and a panel plugin? Previously, all XD plugins were “modal”. Let’s take a look at a modal example:
When the plugin is invoked, a modal pops up over the active document. This behavior prevents users from editing the document while interacting with the plugin.
Now let’s take a look at a panel example:
When the user runs the plugin command from the Plugins Panel or from the menu dropdown, the plugin UI is shown in XD’s Plugins Panel. Users may edit the document while the plugin is open. This also means that plugin UI elements can display dynamic content by listening to changes happening to the active document.
There are many code-level differences between a modal plugin and a panel plugin. In order to help our developers who want to switch from modal plugins to panel-based plugins, we have created the “How to Migrate from Modal to Panel” tutorial.
What to expect in UXP 3.1
If you have already subscribed to the prerelease program, you are probably familiar with this update already. If not, email us to join the prerelease.
XD 21 includes a big update for UXP, the Unified Extensibility Platform, which provides several common APIs for XD, including File I/O, Networking, and a User Interface layer. There are many new features to take advantage of; however, in order to gain access to these features, your plugin must opt-in to the new UXP layout by changing the host.minVersion key in your manifest.json file.
By setting the minimum version to 21, you will be able to use the following features:
- Inline layout
- CSS variables
- New size units (
rem,em,px,pt,vh,vw,cm,in) - Z-index
- Additional property values (
initial,unset, andinherit) - Linear gradient support
- Outline support
- Object-fit
- New pseudo-selectors (
:langand:focus) - An improved default for overflow
New features are great. However, if you have an existing plugin, you might want to check your UI to make sure it looks as expected (there are some UI breaking changes, see our examples here). We are trying to get UXP closer to web standards by adding new web APIs and improving existing ones. For further details, review our change logs.
What’s coming next
Adobe XD is updated for users very frequently, and each time we have something new for developers too. In the next couple of updates, we are going to release a debugging feature to allow developers to debug using Chrome Developer Tools. Also, drag and drop from panel UI to the document is coming soon! Feel free to follow our public roadmap to keep up-to-date with what’s coming next.
To reiterate, XD 21 is our biggest update for our plugin developers yet. These new updates are already available in the latest version of XD 21 so give it a try! To learn more, visit our API documentation and check out new panel samples in the XD Samples repository. Also, we would love to hear your feedback — share your thoughts on the XD Developer forum.
We hope this gives you a good summary of the plugin API changes you can expect in this new release. Leave comments below if you have any questions, or feel free to chat with us in the XD Developer forum!
For more stories like this, subscribe to our Creative Cloud Developer Newsletter.
