Two years ago we launched XD Extensibility powered by Creative Cloud’s new Unified Extensibility Platform(UXP for short), which enables JavaScript-based plugin development with near-native performance. Since launch, we’ve worked closely with our incredible developer community to evolve the platform in XD, which you’ve helped grow into a thriving ecosystem of more than 300 publicly available plugins which can be found in the Plugin Marketplace.
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 internal integrations of services such as the Home Screen, Share Sheet, and Libraries panel in Photoshop, Illustrator, Indesign, Premiere Pro, After Effects, Audition, Animate, Aero, and of course XD.
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 about 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 CC Platform Launch Announcement[stage link].
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?
Creative Cloud's new unified extensibility platform, or UXP for short, is a shared technology stack that provides aunified, modern JavaScript execution environment, a common set of APIs for Filesystem and Network access, and will eventually include a high-performance Imaging APIs, access to ML Models for data processing and inference, and APIs for accessing Creative Cloudservices on a user’s behalf, such as Libraries and Cloud Documents.It also includes a user interface layer, reminiscent of React Native, for laying out native controls with familiar browser APIs. The API surface also includes bindings with host specific APIs for interacting with the application and document itself.
The following architecture diagram offers a high level overview of relationship between UXP and each host application.
“Host” here refers to a host application, for example, Photoshop.
Unified JavaScript Execution Environment
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!
Modern JavaScript Execution Environment
When using ExtendScript, code was running in a JavaScript environment based on the 1999 ECMAScript 3 standard. Although not impossible, it made using modern JavaScript idioms difficult. Modern JavaScript engines have also put a lot of effort into being performant and better with regard to memory use. For those who are technically inclined, the desktop products that integrate UXP use V8 as the JavaScript VM.
Common APIs
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.
Host 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.
User Interface
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.
The new plugin marketplace in the Creative Cloud Desktop 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!
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](link TBD) that you can use to ask questions and interact with the wider developer community.
What is UXP?
Get Started with UXP-powered Plugins in Photoshop and XD