Announcing UXP in Photoshop
A high level overview of UXP the platform
As with CEP (the Common Extensibility Platform) before it, UXP powers internal feature development in addition to 3rd party extensibility. Over the last few years, we’ve been working hard to integrate UXP across our portfolio of Creative Cloud apps where it’s already powering shared experiences such as the Home Screen, Share UI, and Libraries panel in Photoshop, Illustrator, InDesign, Premiere Pro, After Effects, Audition, Animate, and of course XD.
Keep an eye out for some of amazing new features built on top of UXP in Photoshop this year, with the launch of the Neural Filter Gallery and the new Discover Panel.
This MAX, we’re taking the next step on our 3rd party extensibility journey by bringing UXP-powered Plugins to Photoshop!
It’s been an incredible year partnering closely with the Photoshop Developer community — familiar faces and new— which you can read more about here on the Adobe Tech Blog.
You can also read about our incredible MAX launch partners, and the improvements being made to plugin discovery with the introduction of the Plugins Marketplace to the Creative Cloud Desktop app in our Creative Cloud Platform Launch Announcement.
In this post we’ll be providing a high level overview of UXP the platform, and its relationship each of the host applications it integrates with.
What is UXP?
The following architecture diagram offers a high level overview of relationship between UXP and each host application.
When building panels with CEP, developers weren’t able to interface directly with the Adobe product — instead, they would use evalScript to pass control to code running in an ExtendScript environment which contains APIs for communicating with the host application. This meant maintaining two separate execution contexts. Passing code and data over this bridge is slow, and incredibly difficult to debug. A unified execution environment allows UXP UI and business logic to share the same context, which means no more need to use evalScript!
Just like CEP and ExtendScript before it, there’s a common set of APIs that plugins need access to, regardless of the host app. These include file I/O and network, among others. Where possible, UXP follows existing standards, for instance, network I/O is accomplished using the XMLHttpRequest, fetch, and websocket APIs.
Each host product has a different extensibility surface for interacting with the application and the open document, and UXP allows the host product to expose those APIs directly to the developer. What these host APIs look like will vary from app to app, i.e., what XD provides will not be the same surface that Photoshop or InDesign or Audition will provide.
UXP uses HTML and CSS in addition to native widgets to create a fast, fluid user interface that feels like it belongs in the host product. This means that plugin developers are able to get native look and feel with standard HTML/CSS APIs.
We’re also excited to introduce Spectrum UI controls in UXP! When we started this journey in XD, developers were able to use XD’s controls in their plugins. Since then, the Adobe Design organization has made great strides in moving the Creative Cloud App portfolio to a new design system, called Spectrum. This is the new design system that all new features are using across Creative Cloud applications, and UXP Plugin developers will benefit from this new design system with common controls, design patterns, and host theming support out of the box without needing to spend hours recreating each app’s look and feel in your plugin’s UI.
Get Started with UXP-powered Plugins in Photoshop and XD
If you’re a user, it’s really simple to start using UXP plugins right now. For both Photoshop and XD, simply open the Plugins menu and click “Browse (or Discover) Plugins”. You’ll be presented with the Plugin Marketplace with a filtered view for each application, and you can install plugins and start using them without ever having to restart the app.
If you’re a developer who wants to create new plugins using UXP, it’s really easy to start building plugins — everything you need to get started is available online!
- To learn how to build plugins for Adobe XD, visit: https://adobexdplatform.com.
- Want to build for Photoshop? Visit: https://developer.adobe.com/photoshop/uxp.
You’ll also want to create a new plugin project on the Adobe Developer Console so that you can register your plugin’s unique identifier, and download a starter project for either Adobe XD or Photoshop.
As you’re building your plugin, you’ll likely want to reach out for support and feedback from the developer community. We have forums available here that you can use to ask questions and interact with the wider developer community.
For more stories like this, subscribe to our Creative Cloud Developer Newsletter.