Learning by Doing: Porting “Free Stock Search” from CEP to UXP in Adobe XD
Our guest developer post this week is Thomas Zagler, founder and developer at pixelsucht (which means “pixel dependency” in German). In addition to working as a designer and photographer, he focuses on building plugins for Creative Cloud apps. After many years of experience with CEP panels, Thomas published his first plugin for Adobe XD based on UXP in 2019.
— Ingo Eichel, Sr Manager, Creative Cloud Ecosystem Development, EMEA
This article is intended for developers who have either built CEP panels for flagship Creative Cloud products and want to port those panels to UXP, or to those who would like to develop entirely new UXP plugins for Adobe XD. UXP is shorthand for “Unified Extensibility Platform,” the new API platform that powers plugins in Adobe XD.
I have developed a number of CEP extensions for multiple Adobe Creative Cloud apps (like Photoshop, InDesign, Illustrator, and much more). You can find my CEP panels on Adobe Exchange and on my website.
To learn UXP, I decided to port my free CEP panel Free Stock Search to Adobe XD. In this article, I want to share my experience with UXP and the Adobe XD Plugin Manager, the in-app experience that lets users discover and install XD plugins.
UXP in comparison with CEP
The biggest differences between UXP and CEP are:
- CEP uses Chromium (a browser) for building the UI.
- UXP uses an in-house developed “browser like” platform.
- CEP uses two separate engines: JS (the panel’s) and JSX (the host app’s). More details can be found in the blog post Scripting CC Apps Using CEP Panels.
- UXP uses one engine. No need to send strings between the UI engine and the host app’s engine.
Important to know
UXP is under active development and Adobe XD is the first Adobe product that allows third-party developers to work with it. In the future, UXP will also be available in other Creative Cloud products as a plugin development platform.
Porting my CEP panel to UXP
My plugin Free Stock Search allows the user to search on Unsplash, Pixabay, Pexels, Adobe Stock and Shutterstock for photos and download and open them with one click in Photoshop, InDesign, Illustrator, Premiere Pro and After Effects with the CEP version, or in Adobe XD with the new UXP version of the plugin.
With the Pro version of Free Stock Search for XD, which was released recently, users can search for free vectors or icons from Pixabay additionally or download photos, in a range of different file sizes.
To get started with UXP there are a lot of useful resources:
Since UXP does not use a complete browser for rendering, there are advantages but also disadvantages compared to CEP:
While you have to completely define the appearance of each UI element in CEP using CSS yourself, UXP, provides predefined layouts for each UXP UI element. This makes them fit much better into the layout of the host app and also saves a lot of work.
The Adobe XD Plugin Manager
The Plugin Manager in Adobe XD has proven to be a major advance over Adobe Exchange (the platform through which CEP panels can be purchased and installed).
In Adobe XD, users can discover new plugins easily and find all the information they need to install it in one click inside the app. The installation of UXP plugins works seamlessly with the Plugin Manager.
I published the plugin Free Stock Search for Adobe XD without further marketing or advertisements. The number of new users per day is many times higher than with my CEP panels on Adobe Exchange.
When users start the plugin for the first time, I ask them to activate it via email. That is how I know about download numbers and geos. Would like to see Adobe implementing such a feature natively (and at least it is on the XD Extensibility Roadmap already).
Within four months the plugin was installed by 7700 users from 37 countries. That is about 64 new users per day, without any promotion, or extra marketing.
Get started with UXP in Adobe XD
I’m glad that I built a UXP version of my plugin for Adobe XD:
1. I’ve been able to reach new audiences with my plugin, with the Plugin Manager providing great visibility for users to discover my plugin. The number of people finding my plugin grows faster and with less effort than on Adobe Exchange.
2. With the additional Pro version, I can generate some additional revenue for my company.
3. After learning UXP with this plugin, I will be able to develop other UXP plugins faster than CEP plugins. I will use my new knowledge to build on UXP when it’s available for other apps as well.
4. I like how UXP is evolving and growing. The team is open for feature requests and improvements and the developer community in the forums is helping each other.
If you’re ready to give UXP-based plugin APIs in Adobe XD a try, all of the resources to get started can be found on adobexdplatform.com.
For more stories like this, subscribe to our Creative Cloud Developer Newsletter.