Creating a Plugin with the UXP Developer Tool
So you have Photoshop, you have the UXP Developer Tool, and you have Visual Studio Code or other programmer's text editor. Now what?
First make sure you have the UXP Developer Tool (UDT). You can download installers for the UDT here. Once it's downloaded, run the installer just like any other on Mac or Windows. On macOS, it creates a folder in your
Applications folder named "Adobe UXP Developer Tools." On Windows, the folder is on the boot drive in the
Program Files->Adobe folder. Then follow these steps:
- Launch Photoshop.
- Launch the UXP Developer Tool. If you've never launched it before, you should see a window like this:
You'll also see this window if you have no plugins loaded in the Tool.
The left pane shows applications that are "connected" to the tool. At this time, the only applications that can connect are Photoshop and XD. In this pane, you should see "Adobe Photoshop" in the
Connected Applications list. If you don't, something is wrong; UDT can't connect to Photoshop. Make sure you're running at least version 22.0.0 of Photoshop; earlier versions did not support UXP.
The center pane shows the plugs that are loaded in UDT, but you don't have any yet. At the top right is a gear icon; if selected, it shows this sheet:
You shouldn't need to change the Service Port, which is what UDT uses to communicate with host applications. Feel free to change the theme.
- Close that sheet, then click
Create Plugin. You'll see this dialog:
- Fill in the fields. The text in gray is cue text, not a default value, so you need to fill in all the fields. Give your plugin a unique name (i.e. don't call it "Layers") and plugin ID. Select "Adobe Photoshop" as the Host Application. Select "ps-starter" as the Template.
IMPORTANT: When you distribute your plugin, you'll need to obtain a plugin ID from the Adobe Developer Console. For testing, though, just invent an id like 'com.yourname.pluginname'.
For this exercise, we'll use the
Template popup include
ps-react-starter, which creates a simple React-based plugin.
Next. UDT will prompt for a location in which to save the plugin files. Note that it does not create a folder by default, so save your plugin into a previously-created empty folder, or click the
create foldericon in the top left of the Save dialog:
- The Developer Tool will save your plugin files, and you should then see this message:
- Now, load your new plugin by clicking the
•••(aka "Actions") menu (next to the name of the plugin you just created), and select
You should see a message like this at the bottom of the UDT window:
Now take a look at Photoshop; your new plugin panel should be running!
If it didn't load, you'll see an error popup like this:
Details link in this message will show an error log indicating why the plugin failed to load:
Customize your plugin by editing the .js and .html files, perhaps adding some CSS. Make it your own! Don't forget to edit the
README.md file and, if necessary, the
In case you've closed your plugin's panel in Photoshop, you can find it again in Photoshop's
Watching, Reloading, and Debugging#
Watch item from the Actions menu causes the Developer Tool to watch for any changes in your code on disk.
Whenever you make a change to a file in your project, UDT will reload your plugin automatically. This makes for a very rapid code->make mistakes->fix mistakes->reload cycle.
You can also reload your plugin manually by selecting
Reload from the Actions menu. If you have
Watch enabled, you shouldn't have to do this. But some people are superstitious.
You can also debug your plugin by choosing
Debug from the Actions menu. This brings up a window like this:
In this debugger (which resembles the Chrome debugger) you can look at the console log, and do the usual debugger things such as setting breakpoints, stepping into and out of functions, etc. If you just want to look at logs without dealing with the debugger, you can choose the
Logs option in the Actions menu.
You can host as many plugins as you want in the UXP Developer Tool. You can either create the plugin folder structure and files from scratch and click the blue
Add Plugin button in the Tool, or you can click the
Create Plugin button to have it created for you, wizard-style. Then you choose the
Load item in the Actions menu to load your plugin into Photoshop.
In order to distribute your plugin (after it's been throughly polished and debugged), you'll need to package it as a "ccx" file. This is easily accomplished by choosing the
Package option in the Actions menu. Make sure you get a plugin ID from the Adobe Developer Console website before packaging your plugin for distribution.
To distribute your plugin, see Sharing Your Plugin.