This plugin is a good place to get started when building a Photoshop plugin using React. It comes defined with all the dependencies that you'll need to get started. As this is a React project, you'll need to do some initial configuration before this will be usable in Photoshop.
First, make sure that yarn
is installed on your system.
npm install -g yarn
Then, after you ensure that your terminal is in the root of this project, use yarn
to install the various dependencies needed:
yarn install
There are two ways to build the plugin for use in Photoshop:
yarn watch
will build a development version of the plugin, and recompile everytime you make a change to the source files. The result is placed indist
folder.yarn build
will build a production version of the plugin and place it indist
folder. It will not update every time you make a change to the source files.
You must run either
watch
orbuild
prior to trying to use within Photoshop!
You can use the UXP Developer Tools to load the plugin into Photoshop.
If the plugin hasn't already been added to your workspace in the UXP Developer Tools, you can add it by clicking "Add Plugin...". You can either add the dist
folder or the plugin
folder - if you add the plugin folder - then you need to set the relative path to build folder ( 'dist' ) in the Plugin's Load Option.
Once added, you can load it into Photoshop by clicking the ••• button on the corresponding row, and clicking "Load". Switch to Photoshop and you should see the starter panels.
This plugin doesn't do much, but does illustrate how to create two panels in Photoshop with entrypoints.setup
, and how to create flyout menus. It also demonstrates the use of several Spectrum UXP widgets to create a simple color picker in the primary panel.