Do It Yourself XD Plugin(s) for Beginners: Part 1
Have you been working with Adobe XD and seen some of the awesome plugins? Do you have an idea for a plugin, but you only know one or two lines of JavaScript? If so, you’ve come to the right place! I’m going to walk you through how to build your first Adobe XD plugin.
Let’s be honest, it’s intimidating to hear someone say, “Let’s build a plugin!” Building a plugin is, in fact, programming software. But even people with little programming background can easily build an XD plugin and learn to code at the same time. Here are a few more reasons to get started:
- Adobe XD plugins are written in the most popular web programming language, JavaScript.
- You can also use HTML and CSS to create the plugin’s UI.
- Adobe XD has become a popular tool in the UX and screen design space.
- Adobe XD plugins can be very powerful; Make your plugin do all the manual, repetitive work!
- Adobe XD has a built-in plugin manager you can upload your plugin to, (just in case you want to share your plugin with others).
To be clear, part one is not an advanced guide to writing plugins. This article is geared towards people with a limited coding background (or no coding background). If you are already a developer, please read Kerri Shott’s article, Spinning Up Your First Adobe XD Plugin.
0. Prerequisites
Before you start, make sure to update XD in the Creative Cloud app on your desktop:
Or download XD for free if you haven’t already.
I will walk you through how to write your first plugin step-by-step. If you want the code that’s already finished and written for you, you can download the starter project on Adobe Console by creating a new project.
Let’s get started.
1. Open the “develop” folder and create your plugin folder
You can find the develop folder in the Plugins > Development > Show Develop Folder menu. This will open the develop folder, where your plugin must be saved.
2. Open your folder in your favorite text editor
Text editors are handy when writing code. If you are using VSCode, simply drag and drop your plugin’s folder onto the text editor icon. (You could just use TextEdit or Notepad, but if you want to learn to code, you’ll want to try an editor like VSCode or Sublime Text.)
XD requires two files at minimum:
my-first-plugin
├── main.js
└── manifest.jsonmain.js is a JavaScript file where the plugin code lives, and manifest.json is a JSON file where we write some facts to describe our plugin like its name, id, and a few other details we'll come back to later. Note that these two files must be named exactly this way.
4. “Describe” your plugin in manifest.json
XD requires you to “describe” your plugin in a JSON formatted file. It’s OK if you’ve never used (or heard of!) JSON before. This is a short file, and it’s the only time you’re required to use JSON in your plugin.
Simply copy the code above and paste it into your manifest.json file.
The commandId ( myFunction) must match the name of the function exported from your main.js file. I will cover this in the next step.
Let’s start coding in the main.js file.
5. Write your main code
Let’s start writing the main code for your plugin:
Let’s try to read out loud what these six lines of code do. The first line is telling XD we are going to use the Rectangle object and user's selection (whatever the user has selected in the document) as well as the Color module by requiring them from the scenegraph API:
Then, we’re creating a new rectangle:
Next, we are giving the width and height to the newly created rectangle and coloring it red:
After that, we insert the new rectangle into user’s selection:
We are telling XD to insert our new, 100x50, red rectangle into the document, as a Child of whatever the user happens to have selected at the time (the selection is the Parent).
Now, we have to wrap your logic in a function like this:
The next step is to export this function. Remember the manifest.json file? This is where it becomes important.
6. “Export” your main function
We need to add a block of code that tells your JavaScript file to talk to your JSON file. Remember the commandId in your manifest.json file? We will "export" our myFunction to the manifest.json:
Again, the name of the function you are exporting, myFunction, should match the commandId in your manifest.json file. Now your manifest.json file will know that our JavaScript code exists in main.js when we run the plugin.
7. Save changes and reload the plugins
Be sure to save both the main.js file and the manifest.json file in your text editor, then reload the plugins in XD. This leads to the final step...
8. Run your plugin!
You’ve coded your first Adobe XD plugin! The completed code sample of this can be found on our XD Plugin Samples repository.
Next, try changing the color of the rectangle, making it bigger, or changing the name of your command in the menu. Don’t forget to save your files and reload the plugins after each change.
Troubleshooting
If you went to run your plugin, and couldn’t find it in the plugin menu, or you ran it and nothing happened, let us know in the forums! Beginners are always welcome.
If you’d like to try to troubleshoot on your own, you can download the starter project on Adobe Console by creating a new project. (The starter project is very similar to the code above.) You’ll need to name your project in order to see the starter project download link.
Inspiration
Here are some example plugins that other people have built:
UnDraw is a plugin that lets you import design assets into XD.
Angle is a plugin that makes it easy to mock-up screen designs.
Granted, these are some of the more complicated plugins available in the Plugin Manager. I will write multiple follow-up articles in this series to get you there slowly.
While you wait for the next installment, here are some next steps for you: Check out our 40+ sample plugins Read the API documentation Join our XD plugin development community
Also, if you have any specific topics you want me to cover in the following articles in this series, please let me know via the comments or talk to me on the forum!
For more stories like this, subscribe to our Creative Cloud Developer Newsletter.
