Adobe has been revolutionizing the tech space for both designers and developers for the past few years. I am glad that I had the opportunity to contribute to the amazing community by being an MLH Fellow for the Spring 2021 Cohort. During my contribution period, I worked on making a VueJS Starter Plugin for Adobe Photoshop and Adobe XD.

This article is for VueJS developers who want to get started making Photoshop or XD plugins using UXP, the Unified Extensibility Platform. Beginner developers getting started with plugin development with UXP using VueJS will also find this article helpful.

Recently, Adobe released a completely new API platform called the Unified Extensibility Platform (UXP), for creating plugins (also known as panels or Add-ons previously) in Photoshop 2021 and beyond. Let’s have a brief overview of UXP before we get started with our plugin.

What is UXP?

UXP is a platform that enables JavaScript-based plugin development with near-native performance in Photoshop and XD. It uses a shared technology stack that provides a modern, unified JavaScript execution environment along with a common set of APIs for filesystem and network access, bound with host-specific APIs for interacting with the application and the document itself. UXP gives a modern look and feel to the plugin interfaces and — more importantly — unlocks the potential for better responsiveness and speed for many operations.

What is Vue.js?

Vue is a progressive javascript framework that is mostly used for building user interfaces. It is not a requirement for making UXP-based plugins. You can get started making a vanilla JavaScript plugin following the tutorial here.

However, if you prefer fast-paced development based on your familiarity with HTML, CSS, and JS, this article is for you. If you’ve never used Vue, here’s a good place to get started. You might consider Vue for your UXP plugin for its flexibility and simple integration. Personally, I like Vue and chose this project because of the minimalism and absence of pedigree in its framework.

Let’s start developing our first VueJS based plugin in UXP.

Prerequisites

Before we start, here are the basic requirements:

• Download and Install Photoshop and XD from Adobe Creative Cloud
• Download and Install the UXP Developer Tool using the documentation
• Download and Install Node.js, Yarn, and VueJS. (Editor’s Note: If you’re a beginner, you don’t need these tools to get started. Please see this guide instead.)

Getting Started

We’ll be making a simple XD plugin that can be appended to Photoshop as well. Our plugin will create a dialog in XD, where you can see the count of clicks on the button along with a hello world message.

To begin developing plugins for Photoshop and XD, we first need to understand the required folder structure. Inside the main directory that will contain our plugin, we need to have three folders:

1. plugin: This folder contains all the necessary assets for the plugin like icons and a manifest.json that is used to specify details about the plugin such as its name, the menu item(s) it adds to the app, and so on.
   Learn about the manifest here.
2. src: This folder contains the main source code for the plugin, essentially the javascript code that helps you build the logic for the plugin.
3. dist: This optional folder, created automatically during the build process, is used during plugin development and contains all the files required to load or reload plugins into the UXP Developer Tool. Again, you do not need to create this folder, it is created on its own according to the webpack configuration specified for building/bundling the plugin.

So, the folder structure should look like this: